diff options
Diffstat (limited to 'packages/website/ts/@next/pages/instant')
7 files changed, 0 insertions, 1152 deletions
diff --git a/packages/website/ts/@next/pages/instant/code_demo.tsx b/packages/website/ts/@next/pages/instant/code_demo.tsx deleted file mode 100644 index 4a3022df5..000000000 --- a/packages/website/ts/@next/pages/instant/code_demo.tsx +++ /dev/null @@ -1,183 +0,0 @@ -import * as React from 'react'; -import * as CopyToClipboard from 'react-copy-to-clipboard'; -import SyntaxHighlighter from 'react-syntax-highlighter'; - -import { Button } from 'ts/@next/components/button'; -import { Container } from 'ts/components/ui/container'; -import { styled } from 'ts/style/theme'; -import { zIndex } from 'ts/style/z_index'; - -const CustomPre = styled.pre` - margin: 0px; - line-height: 24px; - overflow: scroll; - width: 100%; - height: 100%; - max-height: 800px; - border-radius: 4px; - code { - background-color: inherit !important; - border-radius: 0px; - font-family: 'Roboto Mono', sans-serif; - border: none; - } - code:first-of-type { - background-color: #060d0d !important; - color: #999; - min-height: 100%; - text-align: center; - margin-right: 15px; - line-height: 25px; - padding: 10px 7px !important; - } - code:last-of-type { - position: relative; - top: 10px; - top: 0; - padding-top: 11px; - display: inline-block; - line-height: 25px; - } -`; - -const customStyle = { - 'hljs-comment': { - color: '#7e7887', - }, - 'hljs-quote': { - color: '#7e7887', - }, - 'hljs-variable': { - color: '#be4678', - }, - 'hljs-template-variable': { - color: '#be4678', - }, - 'hljs-attribute': { - color: '#be4678', - }, - 'hljs-regexp': { - color: '#be4678', - }, - 'hljs-link': { - color: '#be4678', - }, - 'hljs-tag': { - color: '#61f5ff', - }, - 'hljs-name': { - color: '#61f5ff', - }, - 'hljs-selector-id': { - color: '#be4678', - }, - 'hljs-selector-class': { - color: '#be4678', - }, - 'hljs-number': { - color: '#c994ff', - }, - 'hljs-meta': { - color: '#61f5ff', - }, - 'hljs-built_in': { - color: '#aa573c', - }, - 'hljs-builtin-name': { - color: '#aa573c', - }, - 'hljs-literal': { - color: '#aa573c', - }, - 'hljs-type': { - color: '#aa573c', - }, - 'hljs-params': { - color: '#aa573c', - }, - 'hljs-string': { - color: '#bcff88', - }, - 'hljs-symbol': { - color: '#2a9292', - }, - 'hljs-bullet': { - color: '#2a9292', - }, - 'hljs-title': { - color: '#576ddb', - }, - 'hljs-section': { - color: '#576ddb', - }, - 'hljs-keyword': { - color: '#955ae7', - }, - 'hljs-selector-tag': { - color: '#955ae7', - }, - 'hljs-deletion': { - color: '#19171c', - display: 'inline-block', - width: '100%', - backgroundColor: '#be4678', - }, - 'hljs-addition': { - color: '#19171c', - display: 'inline-block', - width: '100%', - backgroundColor: '#2a9292', - }, - hljs: { - display: 'block', - overflowX: 'hidden', - background: '#1B2625', - color: 'white', - fontSize: '12px', - }, - 'hljs-emphasis': { - fontStyle: 'italic', - }, - 'hljs-strong': { - fontWeight: 'bold', - }, -}; - -export interface CodeDemoProps { - children: string; -} - -export interface CodeDemoState { - didCopyCode: boolean; -} - -export class CodeDemo extends React.Component<CodeDemoProps, CodeDemoState> { - public state: CodeDemoState = { - didCopyCode: false, - }; - public render(): React.ReactNode { - const copyButtonText = this.state.didCopyCode ? 'Copied!' : 'Copy'; - return ( - <Container position="relative" height="100%"> - <Container position="absolute" top="10px" right="10px" zIndex={zIndex.overlay - 1}> - <CopyToClipboard text={this.props.children} onCopy={this._handleCopyClick}> - <StyledButton>{copyButtonText}</StyledButton> - </CopyToClipboard> - </Container> - <SyntaxHighlighter language="html" style={customStyle} showLineNumbers={true} PreTag={CustomPre}> - {this.props.children} - </SyntaxHighlighter> - </Container> - ); - } - private readonly _handleCopyClick = () => { - this.setState({ didCopyCode: true }); - }; -} - -const StyledButton = styled(Button)` - border-radius: 4px; - font-size: 15px; - font-weight: 400; - padding: 9px 21px 7px; -`; diff --git a/packages/website/ts/@next/pages/instant/config_generator.tsx b/packages/website/ts/@next/pages/instant/config_generator.tsx deleted file mode 100644 index 3f00e33e2..000000000 --- a/packages/website/ts/@next/pages/instant/config_generator.tsx +++ /dev/null @@ -1,332 +0,0 @@ -import { StandardRelayerAPIOrderProvider } from '@0x/asset-buyer'; -import { getContractAddressesForNetworkOrThrow } from '@0x/contract-addresses'; -import { assetDataUtils } from '@0x/order-utils'; -import { ObjectMap } from '@0x/types'; -import * as _ from 'lodash'; -import * as React from 'react'; -import styled from 'styled-components'; - -import { ConfigGeneratorAddressInput } from 'ts/@next/pages/instant/config_generator_address_input'; -import { FeePercentageSlider } from 'ts/@next/pages/instant/fee_percentage_slider'; -import { CheckMark } from 'ts/components/ui/check_mark'; -import { Container } from 'ts/components/ui/container'; -import { MultiSelect } from 'ts/components/ui/multi_select'; -import { Spinner } from 'ts/components/ui/spinner'; -import { Text } from 'ts/components/ui/text'; -import { colors } from 'ts/style/colors'; -import { WebsitePaths } from 'ts/types'; -import { constants } from 'ts/utils/constants'; - -// New components -import { Heading } from 'ts/@next/components/text'; -import { Select, SelectItemConfig } from 'ts/@next/pages/instant/select'; - -import { assetMetaDataMap } from '../../../../../instant/src/data/asset_meta_data_map'; -import { ERC20AssetMetaData, ZeroExInstantBaseConfig } from '../../../../../instant/src/types'; - -export interface ConfigGeneratorProps { - value: ZeroExInstantBaseConfig; - onConfigChange: (config: ZeroExInstantBaseConfig) => void; -} - -export interface ConfigGeneratorState { - isLoadingAvailableTokens: boolean; - // Address to token info - availableTokens?: ObjectMap<ERC20AssetMetaData>; -} - -const SRA_ENDPOINTS = ['https://api.radarrelay.com/0x/v2/', 'https://sra.bamboorelay.com/0x/v2/']; - -export class ConfigGenerator extends React.Component<ConfigGeneratorProps, ConfigGeneratorState> { - public state: ConfigGeneratorState = { - isLoadingAvailableTokens: true, - }; - public componentDidMount(): void { - // tslint:disable-next-line:no-floating-promises - this._setAvailableAssetsFromOrderProvider(); - } - public componentDidUpdate(prevProps: ConfigGeneratorProps): void { - if (prevProps.value.orderSource !== this.props.value.orderSource) { - // tslint:disable-next-line:no-floating-promises - this._setAvailableAssetsFromOrderProvider(); - const newConfig: ZeroExInstantBaseConfig = { - ...this.props.value, - availableAssetDatas: undefined, - }; - this.props.onConfigChange(newConfig); - } - } - public render(): React.ReactNode { - const { value } = this.props; - if (!_.isString(value.orderSource)) { - throw new Error('ConfigGenerator component only supports string values as an orderSource.'); - } - return ( - <Container minWidth="350px"> - <ConfigGeneratorSection title="Liquidity Source"> - <Select - shouldIncludeEmpty={false} - id="" - value={value.orderSource} - items={this._generateItems()} - onChange={this._handleSRASelection.bind(this)} - /> - </ConfigGeneratorSection> - <ConfigGeneratorSection {...this._getTokenSelectorProps()}> - {this._renderTokenMultiSelectOrSpinner()} - </ConfigGeneratorSection> - <ConfigGeneratorSection title="Transaction fee ETH address" marginBottom="10px" isOptional={true}> - <ConfigGeneratorAddressInput - value={value.affiliateInfo ? value.affiliateInfo.feeRecipient : ''} - onChange={this._handleAffiliateAddressChange} - /> - </ConfigGeneratorSection> - <ConfigGeneratorSection - title="Fee percentage" - actionText="Learn more" - onActionTextClick={this._handleAffiliatePercentageLearnMoreClick} - > - <FeePercentageSlider - value={value.affiliateInfo.feePercentage} - onChange={this._handleAffiliatePercentageChange} - isDisabled={ - _.isUndefined(value.affiliateInfo) || - _.isUndefined(value.affiliateInfo.feeRecipient) || - _.isEmpty(value.affiliateInfo.feeRecipient) - } - /> - </ConfigGeneratorSection> - </Container> - ); - } - private readonly _getTokenSelectorProps = (): ConfigGeneratorSectionProps => { - if (_.isEmpty(this.state.availableTokens)) { - return { - title: 'What tokens can users buy?', - }; - } - if (_.isUndefined(this.props.value.availableAssetDatas)) { - return { - title: 'What tokens can users buy?', - actionText: 'Unselect All', - onActionTextClick: this._handleUnselectAllClick, - }; - } - return { - title: 'What tokens can users buy?', - actionText: 'Select All', - onActionTextClick: this._handleSelectAllClick, - }; - }; - private readonly _generateItems = (): SelectItemConfig[] => { - return _.map(SRA_ENDPOINTS, endpoint => ({ - label: endpoint, - value: endpoint, - onClick: this._handleSRASelection.bind(this, endpoint), - })); - }; - private readonly _handleAffiliatePercentageLearnMoreClick = (): void => { - window.open(`${WebsitePaths.Wiki}#Learn-About-Affiliate-Fees`, '_blank'); - }; - private readonly _handleSRASelection = (event: React.ChangeEvent<HTMLSelectElement>) => { - const sraEndpoint = event.target.value; - const newConfig: ZeroExInstantBaseConfig = { - ...this.props.value, - orderSource: sraEndpoint, - }; - this.props.onConfigChange(newConfig); - }; - private readonly _handleAffiliateAddressChange = (address: string, isValid: boolean) => { - const oldConfig: ZeroExInstantBaseConfig = this.props.value; - const newConfig: ZeroExInstantBaseConfig = { - ...oldConfig, - affiliateInfo: { - feeRecipient: address, - feePercentage: oldConfig.affiliateInfo.feePercentage, - }, - }; - this.props.onConfigChange(newConfig); - }; - private readonly _handleAffiliatePercentageChange = (value: number) => { - const oldConfig: ZeroExInstantBaseConfig = this.props.value; - const newConfig: ZeroExInstantBaseConfig = { - ...oldConfig, - affiliateInfo: { - feeRecipient: oldConfig.affiliateInfo.feeRecipient, - feePercentage: value, - }, - }; - this.props.onConfigChange(newConfig); - }; - private readonly _handleSelectAllClick = () => { - const newConfig: ZeroExInstantBaseConfig = { - ...this.props.value, - availableAssetDatas: undefined, - }; - this.props.onConfigChange(newConfig); - }; - private readonly _handleUnselectAllClick = () => { - const newConfig: ZeroExInstantBaseConfig = { - ...this.props.value, - availableAssetDatas: [], - }; - this.props.onConfigChange(newConfig); - }; - private readonly _handleTokenClick = (assetData: string) => { - const { value } = this.props; - let newAvailableAssetDatas: string[] = []; - const allKnownAssetDatas = _.keys(this.state.availableTokens); - const availableAssetDatas = value.availableAssetDatas; - if (_.isUndefined(availableAssetDatas)) { - // It being undefined means it's all tokens. - newAvailableAssetDatas = _.pull(allKnownAssetDatas, assetData); - } else if (!_.includes(availableAssetDatas, assetData)) { - // Add it - newAvailableAssetDatas = [...availableAssetDatas, assetData]; - if (newAvailableAssetDatas.length === allKnownAssetDatas.length) { - // If all tokens are manually selected, just show none. - newAvailableAssetDatas = undefined; - } - } else { - // Remove it - newAvailableAssetDatas = _.pull(availableAssetDatas, assetData); - } - const newConfig: ZeroExInstantBaseConfig = { - ...this.props.value, - availableAssetDatas: newAvailableAssetDatas, - }; - this.props.onConfigChange(newConfig); - }; - private readonly _setAvailableAssetsFromOrderProvider = async (): Promise<void> => { - const { value } = this.props; - if (!_.isUndefined(value.orderSource) && _.isString(value.orderSource)) { - this.setState({ isLoadingAvailableTokens: true }); - const networkId = constants.NETWORK_ID_MAINNET; - const sraOrderProvider = new StandardRelayerAPIOrderProvider(value.orderSource, networkId); - const etherTokenAddress = getContractAddressesForNetworkOrThrow(networkId).etherToken; - const etherTokenAssetData = assetDataUtils.encodeERC20AssetData(etherTokenAddress); - const assetDatas = await sraOrderProvider.getAvailableMakerAssetDatasAsync(etherTokenAssetData); - const availableTokens = _.reduce( - assetDatas, - (acc, assetData) => { - const metaDataIfExists = assetMetaDataMap[assetData] as ERC20AssetMetaData; - if (metaDataIfExists) { - acc[assetData] = metaDataIfExists; - } - return acc; - }, - {} as ObjectMap<ERC20AssetMetaData>, - ); - this.setState({ availableTokens, isLoadingAvailableTokens: false }); - } - }; - private readonly _renderTokenMultiSelectOrSpinner = (): React.ReactNode => { - const { value } = this.props; - const { availableTokens, isLoadingAvailableTokens } = this.state; - const multiSelectHeight = '200px'; - if (isLoadingAvailableTokens) { - return ( - <Container - className="flex flex-column items-center justify-center" - height={multiSelectHeight} - backgroundColor={colors.white} - borderRadius="4px" - width="100%" - > - <Container position="relative" left="12px" marginBottom="20px"> - <Spinner /> - </Container> - <Text fontSize="16px">Loading...</Text> - </Container> - ); - } - const availableAssetDatas = _.keys(availableTokens); - if (availableAssetDatas.length === 0) { - return ( - <Container - className="flex flex-column items-center justify-center" - height={multiSelectHeight} - backgroundColor={colors.white} - borderRadius="4px" - width="100%" - > - <Text fontSize="16px">No tokens available. Try another endpoint?</Text> - </Container> - ); - } - const items = _.map(_.keys(availableTokens), assetData => { - const metaData = availableTokens[assetData]; - return { - value: assetData, - renderItemContent: (isSelected: boolean) => ( - <Container className="flex items-center"> - <Container marginRight="10px"> - <CheckMark isChecked={isSelected} color={colors.brandLight} /> - </Container> - <CheckboxText isSelected={isSelected}> - {metaData.symbol.toUpperCase()} — {metaData.name} - </CheckboxText> - </Container> - ), - onClick: this._handleTokenClick.bind(this, assetData), - }; - }); - return <MultiSelect items={items} selectedValues={value.availableAssetDatas} height={multiSelectHeight} />; - }; -} - -export interface ConfigGeneratorSectionProps { - title: string; - actionText?: string; - onActionTextClick?: () => void; - isOptional?: boolean; - marginBottom?: string; -} - -export const ConfigGeneratorSection: React.StatelessComponent<ConfigGeneratorSectionProps> = ({ - title, - actionText, - onActionTextClick, - isOptional, - marginBottom, - children, -}) => ( - <Container marginBottom={marginBottom}> - <Container marginBottom="10px" className="flex justify-between items-center"> - <Heading size="small" marginBottom="0" isFlex={true}> - <span>{title}</span> - {isOptional && <OptionalText> Optional</OptionalText>} - </Heading> - {actionText && <OptionalAction onClick={onActionTextClick}>{actionText}</OptionalAction>} - </Container> - {children} - </Container> -); - -ConfigGeneratorSection.defaultProps = { - marginBottom: '30px', -}; - -const OptionalText = styled.span` - display: inline; - font-size: 14px; - color: #999999; - flex-shrink: 0; -`; - -interface CheckboxTextProps { - isSelected?: boolean; -} - -const CheckboxText = - styled.span < - CheckboxTextProps > - ` - font-size: 14px; - line-height: 18px; - color: ${props => (props.isSelected ? colors.brandDark : '#666666')} -`; - -const OptionalAction = styled(OptionalText)` - cursor: pointer; -`; diff --git a/packages/website/ts/@next/pages/instant/config_generator_address_input.tsx b/packages/website/ts/@next/pages/instant/config_generator_address_input.tsx deleted file mode 100644 index 9b0e9b1d1..000000000 --- a/packages/website/ts/@next/pages/instant/config_generator_address_input.tsx +++ /dev/null @@ -1,84 +0,0 @@ -import { addressUtils } from '@0x/utils'; -import * as _ from 'lodash'; -import * as React from 'react'; -import styled from 'styled-components'; - -import { colors } from 'ts/style/colors'; - -import { Container } from 'ts/components/ui/container'; - -import { Paragraph } from 'ts/@next/components/text'; - -export interface ConfigGeneratorAddressInputProps { - value?: string; - onChange?: (address: string, isValid: boolean) => void; -} - -export interface ConfigGeneratorAddressInputState { - errMsg: string; -} - -export interface InputProps { - className?: string; - value?: string; - width?: string; - fontSize?: string; - fontColor?: string; - padding?: string; - placeholderColor?: string; - placeholder?: string; - backgroundColor?: string; - onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void; -} - -export class ConfigGeneratorAddressInput extends React.Component< - ConfigGeneratorAddressInputProps, - ConfigGeneratorAddressInputState -> { - public state = { - errMsg: '', - }; - public render(): React.ReactNode { - const { errMsg } = this.state; - const hasError = !_.isEmpty(errMsg); - return ( - <Container height="80px"> - <Input value={this.props.value} onChange={this._handleChange} placeholder="0xe99...aa8da4" /> - <Container marginTop="5px" isHidden={!hasError} height="25px"> - <Paragraph size="small" isNoMargin={true}> - {errMsg} - </Paragraph> - </Container> - </Container> - ); - } - - private readonly _handleChange = (event: React.ChangeEvent<HTMLInputElement>): void => { - const address = event.target.value; - const isValidAddress = addressUtils.isAddress(address.toLowerCase()) || address === ''; - const errMsg = isValidAddress ? '' : 'Please enter a valid Ethereum address'; - this.setState({ - errMsg, - }); - this.props.onChange(address, isValidAddress); - }; -} - -const PlainInput: React.StatelessComponent<InputProps> = ({ value, className, placeholder, onChange }) => ( - <input className={className} value={value} onChange={onChange} placeholder={placeholder} /> -); - -export const Input = styled(PlainInput)` - background-color: ${colors.white}; - color: ${colors.textDarkSecondary}; - font-size: 1rem; - width: 100%; - padding: 16px 20px 18px; - border-radius: 4px; - border: 1px solid transparent; - outline: none; - &::placeholder { - color: #333333; - opacity: 0.5; - } -`; diff --git a/packages/website/ts/@next/pages/instant/configurator.tsx b/packages/website/ts/@next/pages/instant/configurator.tsx deleted file mode 100644 index 7c67e6333..000000000 --- a/packages/website/ts/@next/pages/instant/configurator.tsx +++ /dev/null @@ -1,104 +0,0 @@ -import * as _ from 'lodash'; -import * as React from 'react'; -import styled from 'styled-components'; - -import { CodeDemo } from 'ts/@next/pages/instant/code_demo'; -import { ConfigGenerator } from 'ts/@next/pages/instant/config_generator'; - -import { Link } from 'ts/@next/components/link'; -import { Column, FlexWrap } from 'ts/@next/components/newLayout'; -import { Heading } from 'ts/@next/components/text'; -import { WebsitePaths } from 'ts/types'; - -import { ZeroExInstantBaseConfig } from '../../../../../instant/src/types'; - -export interface ConfiguratorState { - instantConfig: ZeroExInstantBaseConfig; -} - -export class Configurator extends React.Component { - public state: ConfiguratorState = { - instantConfig: { - orderSource: 'https://api.radarrelay.com/0x/v2/', - availableAssetDatas: undefined, - affiliateInfo: { - feeRecipient: '', - feePercentage: 0, - }, - }, - }; - public render(): React.ReactNode { - const codeToDisplay = this._generateCodeDemoCode(); - return ( - <FlexWrap isFlex={true}> - <Column width="442px" padding="0 70px 0 0"> - <ConfigGenerator value={this.state.instantConfig} onConfigChange={this._handleConfigChange} /> - </Column> - <Column width="100%"> - <HeadingWrapper> - <Heading size="small" marginBottom="15px"> - Code Snippet - </Heading> - <Link href={`${WebsitePaths.Wiki}#Get-Started-With-Instant`} isBlock={true} target="_blank"> - Explore the Docs - </Link> - </HeadingWrapper> - <CodeDemo key={codeToDisplay}>{codeToDisplay}</CodeDemo> - </Column> - </FlexWrap> - ); - } - private readonly _handleConfigChange = (config: ZeroExInstantBaseConfig) => { - this.setState({ - instantConfig: config, - }); - }; - private readonly _generateCodeDemoCode = (): string => { - const { instantConfig } = this.state; - return `<!DOCTYPE html> -<html> - <head> - <meta charset="utf-8" /> - <script src="https://instant.0x.org/instant.js"></script> - </head> - <body> - <script> - zeroExInstant.render({ - orderSource: '${instantConfig.orderSource}',${ - !_.isUndefined(instantConfig.affiliateInfo) && instantConfig.affiliateInfo.feeRecipient - ? `\n affiliateInfo: { - feeRecipient: '${instantConfig.affiliateInfo.feeRecipient.toLowerCase()}', - feePercentage: ${instantConfig.affiliateInfo.feePercentage} - },` - : '' - }${ - !_.isUndefined(instantConfig.availableAssetDatas) - ? `\n availableAssetDatas: ${this._renderAvailableAssetDatasString( - instantConfig.availableAssetDatas, - )}` - : '' - } - }, 'body'); - </script> - </body> - </html>`; - }; - private readonly _renderAvailableAssetDatasString = (availableAssetDatas: string[]): string => { - const stringAvailableAssetDatas = availableAssetDatas.map(assetData => `'${assetData}'`); - if (availableAssetDatas.length < 2) { - return `[${stringAvailableAssetDatas.join(', ')}]`; - } - return `[\n ${stringAvailableAssetDatas.join( - ', \n ', - )}\n ]`; - }; -} - -const HeadingWrapper = styled.div` - display: flex; - justify-content: space-between; - - a { - transform: translateY(-8px); - } -`; diff --git a/packages/website/ts/@next/pages/instant/fee_percentage_slider.tsx b/packages/website/ts/@next/pages/instant/fee_percentage_slider.tsx deleted file mode 100644 index 5775d6dfb..000000000 --- a/packages/website/ts/@next/pages/instant/fee_percentage_slider.tsx +++ /dev/null @@ -1,80 +0,0 @@ -import Slider from 'rc-slider'; -import * as React from 'react'; -import styled from 'styled-components'; -import 'ts/@next/pages/instant/rc-slider.css'; - -import { colors } from 'ts/style/colors'; - -const SliderWithTooltip = (Slider as any).createSliderWithTooltip(Slider); -// tslint:disable-next-line:no-unused-expression - -export interface FeePercentageSliderProps { - value: number; - isDisabled?: boolean; - onChange: (value: number) => void; -} - -export class FeePercentageSlider extends React.Component<FeePercentageSliderProps> { - public render(): React.ReactNode { - return ( - <StyledSlider - min={0} - max={0.05} - step={0.0025} - value={this.props.value} - disabled={this.props.isDisabled} - onChange={this.props.onChange} - tipFormatter={this._feePercentageSliderFormatter} - tipProps={{ placement: 'bottom', overlayStyle: { backgroundColor: '#fff', borderRadius: '4px' } }} - trackStyle={{ - backgroundColor: colors.brandLight, - }} - railStyle={{ - backgroundColor: 'rgba(255, 255, 255, 0.2)', - }} - handleStyle={{ - border: 'none', - boxShadow: 'none', - }} - activeDotStyle={{ - boxShadow: 'none', - border: 'none', - }} - /> - ); - } - private readonly _feePercentageSliderFormatter = (value: number): React.ReactNode => { - return <Text>{`${(value * 100).toFixed(2)}%`}</Text>; - }; -} - -const StyledSlider = styled(SliderWithTooltip)` - .rc-slider-tooltip__inner { - box-shadow: none !important; - background-color: ${colors.white} !important; - border-radius: 4px !important; - padding: 3px 12px !important; - height: auto !important; - position: relative; - top: 7px; - &:after { - border: solid transparent; - content: ' '; - height: 0; - width: 0; - position: absolute; - pointer-events: none; - border-width: 6px; - bottom: 100%; - left: 100%; - border-bottom-color: ${colors.white}; - margin-left: -60%; - } - } -`; - -const Text = styled.span` - color: #000000; - font-size: 12px; - line-height: 18px; -`; diff --git a/packages/website/ts/@next/pages/instant/rc-slider.css b/packages/website/ts/@next/pages/instant/rc-slider.css deleted file mode 100644 index 63038324e..000000000 --- a/packages/website/ts/@next/pages/instant/rc-slider.css +++ /dev/null @@ -1,295 +0,0 @@ -.rc-slider { - position: relative; - height: 14px; - padding: 5px 0; - width: 100%; - border-radius: 6px; - -ms-touch-action: none; - touch-action: none; - box-sizing: border-box; - -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -} - -.rc-slider * { - box-sizing: border-box; - -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -} - -.rc-slider-rail { - position: absolute; - width: 100%; - background-color: #e9e9e9; - height: 4px; - border-radius: 6px; -} - -.rc-slider-track { - position: absolute; - left: 0; - height: 4px; - border-radius: 6px; - background-color: #abe2fb; -} - -.rc-slider-handle { - position: absolute; - margin-left: -7px; - margin-top: -5px; - width: 14px; - height: 14px; - cursor: pointer; - cursor: -webkit-grab; - cursor: grab; - border-radius: 50%; - border: solid 2px #96dbfa; - background-color: #fff; - -ms-touch-action: pan-x; - touch-action: pan-x; -} - -.rc-slider-handle:focus { - border-color: #57c5f7; - box-shadow: 0 0 0 5px #96dbfa; - outline: none; -} - -.rc-slider-handle-click-focused:focus { - border-color: #96dbfa; - box-shadow: unset; -} - -.rc-slider-handle:hover { - border-color: #57c5f7; -} - -.rc-slider-handle:active { - border-color: #57c5f7; - box-shadow: 0 0 5px #57c5f7; - cursor: -webkit-grabbing; - cursor: grabbing; -} - -.rc-slider-mark { - position: absolute; - top: 18px; - left: 0; - width: 100%; - font-size: 12px; -} - -.rc-slider-mark-text { - position: absolute; - display: inline-block; - vertical-align: middle; - text-align: center; - cursor: pointer; - color: #999; -} - -.rc-slider-mark-text-active { - color: #666; -} - -.rc-slider-step { - position: absolute; - width: 100%; - height: 4px; - background: transparent; -} - -.rc-slider-dot { - position: absolute; - bottom: -2px; - margin-left: -4px; - width: 8px; - height: 8px; - border: 2px solid #e9e9e9; - background-color: #fff; - cursor: pointer; - border-radius: 50%; - vertical-align: middle; -} - -.rc-slider-dot-active { - border-color: #96dbfa; -} - -.rc-slider-disabled { - opacity: 0.2; -} - -.rc-slider-disabled .rc-slider-track { - background-color: #ccc; -} - -.rc-slider-disabled .rc-slider-handle, -.rc-slider-disabled .rc-slider-dot { - border-color: #ccc; - box-shadow: none; - background-color: #fff; - cursor: not-allowed; -} - -.rc-slider-disabled .rc-slider-mark-text, -.rc-slider-disabled .rc-slider-dot { - cursor: not-allowed !important; -} - -.rc-slider-vertical { - width: 14px; - height: 100%; - padding: 0 5px; -} - -.rc-slider-vertical .rc-slider-rail { - height: 100%; - width: 4px; -} - -.rc-slider-vertical .rc-slider-track { - left: 5px; - bottom: 0; - width: 4px; -} - -.rc-slider-vertical .rc-slider-handle { - margin-left: -5px; - margin-bottom: -7px; - -ms-touch-action: pan-y; - touch-action: pan-y; -} - -.rc-slider-vertical .rc-slider-mark { - top: 0; - left: 18px; - height: 100%; -} - -.rc-slider-vertical .rc-slider-step { - height: 100%; - width: 4px; -} - -.rc-slider-vertical .rc-slider-dot { - left: 2px; - margin-bottom: -4px; -} - -.rc-slider-vertical .rc-slider-dot:first-child { - margin-bottom: -4px; -} - -.rc-slider-vertical .rc-slider-dot:last-child { - margin-bottom: -4px; -} - -.rc-slider-tooltip-zoom-down-enter, -.rc-slider-tooltip-zoom-down-appear { - animation-duration: .3s; - animation-fill-mode: both; - display: block !important; - animation-play-state: paused; -} - -.rc-slider-tooltip-zoom-down-leave { - animation-duration: .3s; - animation-fill-mode: both; - display: block !important; - animation-play-state: paused; -} - -.rc-slider-tooltip-zoom-down-enter.rc-slider-tooltip-zoom-down-enter-active, -.rc-slider-tooltip-zoom-down-appear.rc-slider-tooltip-zoom-down-appear-active { - animation-name: rcSliderTooltipZoomDownIn; - animation-play-state: running; -} - -.rc-slider-tooltip-zoom-down-leave.rc-slider-tooltip-zoom-down-leave-active { - animation-name: rcSliderTooltipZoomDownOut; - animation-play-state: running; -} - -.rc-slider-tooltip-zoom-down-enter, -.rc-slider-tooltip-zoom-down-appear { - transform: scale(0, 0); - animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1); -} - -.rc-slider-tooltip-zoom-down-leave { - animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); -} - -@keyframes rcSliderTooltipZoomDownIn { - 0% { - opacity: 0; - transform-origin: 50% 100%; - transform: scale(0, 0); - } - - 100% { - transform-origin: 50% 100%; - transform: scale(1, 1); - } -} - -@keyframes rcSliderTooltipZoomDownOut { - 0% { - transform-origin: 50% 100%; - transform: scale(1, 1); - } - - 100% { - opacity: 0; - transform-origin: 50% 100%; - transform: scale(0, 0); - } -} - -.rc-slider-tooltip { - position: absolute; - left: -9999px; - top: -9999px; - visibility: visible; - box-sizing: border-box; - -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -} - -.rc-slider-tooltip * { - box-sizing: border-box; - -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -} - -.rc-slider-tooltip-hidden { - display: none; -} - -.rc-slider-tooltip-placement-top { - padding: 4px 0 8px 0; -} - -.rc-slider-tooltip-inner { - padding: 4px 6px 4px; - min-width: 24px; - height: 24px; - font-size: 12px; - line-height: 1; - color: #000; - text-align: center; - text-decoration: none; -} - -.rc-slider-tooltip-arrow { - position: absolute; - width: 0; - height: 0; - border-color: transparent; - border-style: solid; -} - -.rc-slider-tooltip-placement-top .rc-slider-tooltip-arrow { - bottom: 4px; - left: 50%; - margin-left: -4px; - border-width: 4px 4px 0; - border-top-color: #6c6c6c; -} diff --git a/packages/website/ts/@next/pages/instant/select.tsx b/packages/website/ts/@next/pages/instant/select.tsx deleted file mode 100644 index d4146cfb0..000000000 --- a/packages/website/ts/@next/pages/instant/select.tsx +++ /dev/null @@ -1,74 +0,0 @@ -import * as React from 'react'; -import styled from 'styled-components'; - -export interface SelectItemConfig { - label: string; - value?: string; - onClick?: () => void; -} - -interface SelectProps { - value?: string; - id: string; - items: SelectItemConfig[]; - emptyText?: string; - onChange?: (ev: React.ChangeEvent<HTMLSelectElement>) => void; - shouldIncludeEmpty: boolean; -} - -export const Select: React.FunctionComponent<SelectProps> = ({ - value, - id, - items, - shouldIncludeEmpty, - emptyText, - onChange, -}) => { - return ( - <Container> - <StyledSelect id={id} onChange={onChange}> - {shouldIncludeEmpty && <option value="">{emptyText}</option>} - {items.map((item, index) => ( - <option - key={`${id}-item-${index}`} - value={item.value} - selected={item.value === value} - onClick={item.onClick} - > - {item.label} - </option> - ))} - </StyledSelect> - <Caret width="12" height="7" fill="none" xmlns="http://www.w3.org/2000/svg"> - <path d="M11 1L6 6 1 1" stroke="#666" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" /> - </Caret> - </Container> - ); -}; - -Select.defaultProps = { - emptyText: 'Select...', - shouldIncludeEmpty: true, -}; - -const Container = styled.div` - background-color: #fff; - border-radius: 4px; - display: flex; - width: 100%; - position: relative; -`; - -const StyledSelect = styled.select` - appearance: none; - border: 0; - font-size: 1rem; - width: 100%; - padding: 20px 20px 20px 20px; -`; - -const Caret = styled.svg` - position: absolute; - right: 20px; - top: calc(50% - 4px); -`; |