diff options
author | Brandon Millman <brandon.millman@gmail.com> | 2018-06-06 14:34:20 +0800 |
---|---|---|
committer | Brandon Millman <brandon.millman@gmail.com> | 2018-06-06 16:33:35 +0800 |
commit | 1677817d9fb31d47080705fc4336555f74cbe687 (patch) | |
tree | a827aaf67dcd898e38cec74b8ef477b8ea072276 /packages | |
parent | 03854baf53c5767db7130b8f6d7e91aae015e867 (diff) | |
download | dexon-0x-contracts-1677817d9fb31d47080705fc4336555f74cbe687.tar dexon-0x-contracts-1677817d9fb31d47080705fc4336555f74cbe687.tar.gz dexon-0x-contracts-1677817d9fb31d47080705fc4336555f74cbe687.tar.bz2 dexon-0x-contracts-1677817d9fb31d47080705fc4336555f74cbe687.tar.lz dexon-0x-contracts-1677817d9fb31d47080705fc4336555f74cbe687.tar.xz dexon-0x-contracts-1677817d9fb31d47080705fc4336555f74cbe687.tar.zst dexon-0x-contracts-1677817d9fb31d47080705fc4336555f74cbe687.zip |
Update GenerateOrderForm and FillOrder components
Diffstat (limited to 'packages')
4 files changed, 34 insertions, 6 deletions
diff --git a/packages/website/ts/components/fill_order.tsx b/packages/website/ts/components/fill_order.tsx index 0168ec8f6..e313a43fe 100644 --- a/packages/website/ts/components/fill_order.tsx +++ b/packages/website/ts/components/fill_order.tsx @@ -39,6 +39,8 @@ interface FillOrderProps { initialOrder: Order; dispatcher: Dispatcher; lastForceTokenStateRefetch: number; + isFullWidth?: boolean; + shouldRenderHeader?: boolean; } interface FillOrderState { @@ -61,6 +63,10 @@ interface FillOrderState { } export class FillOrder extends React.Component<FillOrderProps, FillOrderState> { + public static defaultProps: Partial<FillOrderProps> = { + isFullWidth: false, + shouldRenderHeader: true, + }; private _isUnmounted: boolean; constructor(props: FillOrderProps) { super(props); @@ -97,10 +103,15 @@ export class FillOrder extends React.Component<FillOrderProps, FillOrderState> { this._isUnmounted = true; } public render(): React.ReactNode { + const rootClassName = this.props.isFullWidth ? 'clearfix' : 'lg-px4 md-px4 sm-px2'; return ( - <div className="clearfix lg-px4 md-px4 sm-px2" style={{ minHeight: 600 }}> - <h3>Fill an order</h3> - <Divider /> + <div className={rootClassName} style={{ minHeight: 600 }}> + {this.props.shouldRenderHeader && ( + <div> + <h3>Fill an order</h3> + <Divider /> + </div> + )} <div> {!this.props.isOrderInUrl && ( <div> diff --git a/packages/website/ts/components/generate_order/generate_order_form.tsx b/packages/website/ts/components/generate_order/generate_order_form.tsx index 5f968a5e4..e786719b0 100644 --- a/packages/website/ts/components/generate_order/generate_order_form.tsx +++ b/packages/website/ts/components/generate_order/generate_order_form.tsx @@ -47,6 +47,8 @@ interface GenerateOrderFormProps { sideToAssetToken: SideToAssetToken; tokenByAddress: TokenByAddress; lastForceTokenStateRefetch: number; + isFullWidth?: boolean; + shouldRenderHeader?: boolean; } interface GenerateOrderFormState { @@ -56,6 +58,10 @@ interface GenerateOrderFormState { } export class GenerateOrderForm extends React.Component<GenerateOrderFormProps, GenerateOrderFormState> { + public static defaultProps: Partial<GenerateOrderFormProps> = { + isFullWidth: false, + shouldRenderHeader: true, + }; constructor(props: GenerateOrderFormProps) { super(props); this.state = { @@ -80,10 +86,15 @@ export class GenerateOrderForm extends React.Component<GenerateOrderFormProps, G const exchangeContractIfExists = this.props.blockchain.getExchangeContractAddressIfExists(); const initialTakerAddress = this.props.orderTakerAddress === constants.NULL_ADDRESS ? '' : this.props.orderTakerAddress; + const rootClassName = this.props.isFullWidth ? 'clearfix mb2' : 'clearfix mb2 lg-px4 md-px4 sm-px2'; return ( - <div className="clearfix mb2 lg-px4 md-px4 sm-px2"> - <h3>Generate an order</h3> - <Divider /> + <div className={rootClassName}> + {this.props.shouldRenderHeader && ( + <div> + <h3>Generate an order</h3> + <Divider /> + </div> + )} <div className="mx-auto" style={{ maxWidth: 580 }}> <div className="pt3"> <div className="mx-auto clearfix"> diff --git a/packages/website/ts/components/portal/portal.tsx b/packages/website/ts/components/portal/portal.tsx index 33f39a468..f0d26aeb0 100644 --- a/packages/website/ts/components/portal/portal.tsx +++ b/packages/website/ts/components/portal/portal.tsx @@ -451,6 +451,8 @@ export class Portal extends React.Component<PortalProps, PortalState> { blockchain={this._blockchain} hashData={this.props.hashData} dispatcher={this.props.dispatcher} + isFullWidth={true} + shouldRenderHeader={false} /> ); } @@ -470,6 +472,8 @@ export class Portal extends React.Component<PortalProps, PortalState> { tokenByAddress={this.props.tokenByAddress} dispatcher={this.props.dispatcher} lastForceTokenStateRefetch={this.props.lastForceTokenStateRefetch} + isFullWidth={true} + shouldRenderHeader={false} /> ); } diff --git a/packages/website/ts/containers/generate_order_form.ts b/packages/website/ts/containers/generate_order_form.ts index 98c9b8cd6..23c869a1e 100644 --- a/packages/website/ts/containers/generate_order_form.ts +++ b/packages/website/ts/containers/generate_order_form.ts @@ -13,6 +13,8 @@ interface GenerateOrderFormProps { blockchain: Blockchain; hashData: HashData; dispatcher: Dispatcher; + isFullWidth?: boolean; + shouldRenderHeader?: boolean; } interface ConnectedState { |