@ant-design/icons#RightOutlined JavaScript Examples
The following examples show how to use
@ant-design/icons#RightOutlined.
You can vote up the ones you like or vote down the ones you don't like,
and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
| Source File: index.js From bank-client with MIT License | 6 votes |
|
function ForgotPasswordAction({onValidateFields}) {
const { isLoading, error } = useSelector(stateSelector);
return (
<StyledFormActionsWrapper>
<StyledButton onClick={onValidateFields} disabled={isLoading || !!error} type="primary" onClick={onValidateFields}
errored={error ? 1 : 0}>
{isLoading && (<LoadingIndicator />)}
{error && <StyledError>{error}</StyledError>}
{!error && !isLoading && ( <> <FormattedMessage {...messages.action} /> <RightOutlined /></>)}
</StyledButton>
</StyledFormActionsWrapper>
);
}
Example #2
| Source File: index.js From bank-client with MIT License | 6 votes |
|
function ResetPasswordAction({ onValidateFields }) {
const { isLoading, error } = useSelector(stateSelector);
return (
<StyledFormActionsWrapper>
<StyledButton
onClick={onValidateFields}
disabled={isLoading || !!error}
type="primary"
errored={error ? 1 : 0}
>
{isLoading && <LoadingIndicator />}
{error && <StyledError>{error}</StyledError>}
{!error && !isLoading && (
<>
<FormattedMessage {...messages.action} /> <RightOutlined />
</>
)}
</StyledButton>
</StyledFormActionsWrapper>
);
}
Example #3
| Source File: index.js From react_management_template with Apache License 2.0 | 5 votes |
|
render() {
return (
<div>
<Row>
<Card title="基础按钮" className="base_button" >
<Button type="primary">按钮</Button>
<Button>按钮</Button>
<Button type="dashed">按钮</Button>
<Button type="danger">按钮</Button>
<Button disabled>按钮</Button>
</Card>
<Card title="图形按钮" className="base_button" >
<Button icon={<PlusOutlined />}>创建</Button>
<Button icon={<EditOutlined />}>编辑</Button>
<Button icon={<DeleteOutlined />}type="dashed">删除</Button>
<Button icon={<SearchOutlined />} type="primary">搜索</Button>
<Button icon={<DownloadOutlined />} type="primary">下载</Button>
</Card>
<Card title="Loading按钮" className="base_button" >
<Button type="primary" loading={this.state.loading}>确定</Button>
<Button type="primary" shape="circle" loading={this.state.loading}></Button>
<Button loading={this.state.loading}>点击加载</Button>
<Button shape="circle" loading={this.state.loading}></Button>
<Button type="primary" onClick={this.handleCloseLoading}>关闭</Button>
</Card>
<Card title="按钮组" className="base_button" >
<Button.Group>
<Button type="primary" icon={<LeftOutlined/>}>返回</Button>
<Button type="primary" icon={<RightOutlined/>}>前进</Button>
</Button.Group>
</Card>
<Card title="按钮尺寸" className="base_button" >
<Radio.Group value={this.state.size} onChange={this.handleChange}>
<Radio value="small">小</Radio>
<Radio value="default">中</Radio>
<Radio value="large">大</Radio>
</Radio.Group>
<Button size={this.state.size} type="primary">按钮</Button>
<Button size={this.state.size} >按钮</Button>
<Button size={this.state.size} type="dashed">按钮</Button>
<Button size={this.state.size} type="danger">按钮</Button>
<Button size={this.state.size} disabled>按钮</Button>
</Card>
</Row>
</div>
);
}
Example #4
| Source File: index.js From bank-client with MIT License | 5 votes |
|
export default function LoginAction({ steps, onValidateFields }) {
const { isLoading, currentStep, error } = useSelector(stateSelector);
const dispatch = useDispatch();
const onPreviousStep = () => dispatch(previousStepAction());
return (
<StyledFormActionsWrapper>
<StyledButton
disabled={isLoading || !!error}
type="primary"
onClick={onValidateFields}
errored={error ? 1 : 0}
>
{(currentStep < steps.length - 1 && (
<>
<FormattedMessage {...messages.next} /> <RightOutlined />
</>
)) ||
(currentStep === steps.length - 1 && isLoading && (
<LoadingIndicator />
)) ||
(currentStep === steps.length - 1 && error && (
<StyledError>{error}</StyledError>
)) ||
(currentStep === steps.length - 1 && (
<FormattedMessage {...messages.create} />
))}
</StyledButton>
{currentStep > 0 && (
<StyledButton
disabled={isLoading}
type="link"
back="true"
onClick={onPreviousStep}
>
<LeftOutlined /> <FormattedMessage {...messages.previous} />
</StyledButton>
)}
</StyledFormActionsWrapper>
);
}
Example #5
| Source File: index.js From bank-client with MIT License | 5 votes |
|
export default function RegisterAction({ steps, onValidateFields }) {
const { isLoading, currentStep, error } = useSelector(stateSelector);
const dispatch = useDispatch();
const onPreviousStep = () => dispatch(previousStepAction());
return (
<StyledFormActionsWrapper>
<StyledButton
disabled={isLoading || !!error}
type="primary"
onClick={onValidateFields}
errored={error ? 1 : 0}
>
{(error && <StyledError>{error}</StyledError>) ||
(currentStep < steps.length - 1 && !error && (
<>
<FormattedMessage {...messages.next} /> <RightOutlined />
</>
)) ||
(currentStep === steps.length - 1 && isLoading && (
<LoadingIndicator />
)) ||
(currentStep === steps.length - 1 && !error && (
<FormattedMessage {...messages.create} />
))}
</StyledButton>
{currentStep > 0 && (
<StyledButton
disabled={isLoading}
type="link"
back="true"
onClick={onPreviousStep}
>
<LeftOutlined /> <FormattedMessage {...messages.previous} />
</StyledButton>
)}
</StyledFormActionsWrapper>
);
}
Example #6
| Source File: index.jsx From prometheusPro with MIT License | 5 votes |
|
Content = (
<Fragment>
<div className={styles.title}>您提交的内容有如下错误：</div>
<div
style={{
marginBottom: 16,
}}
>
<CloseCircleOutlined
style={{
marginRight: 8,
}}
className={styles.error_icon}
/>
您的账户已被冻结
<a
style={{
marginLeft: 16,
}}
>
立即解冻
<RightOutlined />
</a>
</div>
<div>
<CloseCircleOutlined
style={{
marginRight: 8,
}}
className={styles.error_icon}
/>
您的账户还不具备申请资格
<a
style={{
marginLeft: 16,
}}
>
立即升级
<RightOutlined />
</a>
</div>
</Fragment>
)
Example #7
| Source File: index.js From gobench with Apache License 2.0 | 4 votes |
|
render() {
const { size } = this.state
return (
<div className="row" id="example-buttons">
<div className="col-lg-6">
<h5 className="mb-3">
<strong>Default</strong>
</h5>
<div className="mb-5">
<Button type="primary" className="mr-3 mb-3">
Primary
</Button>
<Button className="mr-3 mb-3">Default</Button>
<Button type="dashed" className="mr-3 mb-3">
Dashed
</Button>
<Button type="danger" className="mr-3 mb-3">
Danger
</Button>
<Button type="link" className="mr-3 mb-3">
Link
</Button>
</div>
<h5 className="mb-3">
<strong>Size</strong>
</h5>
<div className="mb-5">
<Radio.Group value={size} onChange={this.handleSizeChange}>
<Radio.Button value="large">Large</Radio.Button>
<Radio.Button value="default">Default</Radio.Button>
<Radio.Button value="small">Small</Radio.Button>
</Radio.Group>
<br />
<br />
<Button type="primary" size={size} className="mr-3 mb-3">
Primary
</Button>
<Button size={size} className="mr-3 mb-3">
Normal
</Button>
<Button type="dashed" size={size} className="mr-3 mb-3">
Dashed
</Button>
<Button type="danger" size={size} className="mr-3 mb-3">
Danger
</Button>
<Button type="link" size={size} className="mr-3 mb-3">
Link
</Button>
<br />
<Button type="primary" icon={<DownloadOutlined />} size={size} className="mr-3 mb-3" />
<Button
type="primary"
shape="circle"
icon={<DownloadOutlined />}
size={size}
className="mr-3 mb-3"
/>
<Button
type="primary"
shape="round"
icon={<DownloadOutlined />}
size={size}
className="mr-3 mb-3"
/>
<Button
type="primary"
shape="round"
icon={<DownloadOutlined />}
size={size}
className="mr-3 mb-3"
>
Download
</Button>
<Button type="primary" icon={<DownloadOutlined />} size={size} className="mr-3 mb-3">
Download
</Button>
<br />
<Button.Group size={size} className="mr-3 mb-3">
<Button type="primary">
<LeftOutlined />
Backward
</Button>
<Button type="primary">
Forward
<RightOutlined />
</Button>
</Button.Group>
</div>
<h5 className="mb-3">
<strong>Disabled</strong>
</h5>
<div className="mb-5">
<Button type="primary" className="mr-3 mb-3">
Primary
</Button>
<Button type="primary" disabled className="mr-3 mb-3">
Primary(disabled)
</Button>
<br />
<Button className="mr-3 mb-3">Default</Button>
<Button disabled className="mr-3 mb-3">
Default(disabled)
</Button>
<br />
<Button type="dashed" className="mr-3 mb-3">
Dashed
</Button>
<Button type="dashed" disabled className="mr-3 mb-3">
Dashed(disabled)
</Button>
<br />
<Button type="link" className="mr-3 mb-3">
Link
</Button>
<Button type="link" disabled className="mr-3 mb-3">
Link(disabled)
</Button>
</div>
</div>
<div className="col-lg-6">
<h5 className="mb-3">
<strong>Default</strong>
</h5>
<div className="mb-5">
<Button type="primary" shape="circle" icon={<SearchOutlined />} className="mr-3 mb-3" />
<Button type="primary" shape="circle" className="mr-3 mb-3">
A
</Button>
<Button type="primary" icon={<SearchOutlined />} className="mr-3 mb-3">
Search
</Button>
<Button shape="circle" icon={<SearchOutlined />} className="mr-3 mb-3" />
<Button icon={<SearchOutlined />} className="mr-3 mb-3">
Search
</Button>
<br />
<Button shape="circle" icon={<SearchOutlined />} className="mr-3 mb-3" />
<Button icon={<SearchOutlined />} className="mr-3 mb-3">
Search
</Button>
<Button type="dashed" shape="circle" icon={<SearchOutlined />} className="mr-3 mb-3" />
<Button type="dashed" icon={<SearchOutlined />} className="mr-3 mb-3">
Search
</Button>
</div>
<h5 className="mb-3">
<strong>Loading</strong>
</h5>
<div className="mb-5">
<Button type="primary" loading className="mr-3 mb-3">
Loading
</Button>
<Button type="primary" size="small" loading className="mr-3 mb-3">
Loading
</Button>
<br />
<Button type="primary" loading className="mr-3 mb-3" />
<Button type="primary" shape="circle" loading className="mr-3 mb-3" />
<Button type="danger" shape="round" loading className="mr-3 mb-3" />
</div>
<h5 className="mb-3">
<strong>Block Buttons</strong>
</h5>
<div className="mb-5">
<Button type="primary" block className="mb-3">
Primary
</Button>
<Button block className="mb-3">
Default
</Button>
<Button type="dashed" block className="mb-3">
Dashed
</Button>
<Button type="danger" block className="mb-3">
Danger
</Button>
<Button type="link" block className="mb-3">
Link
</Button>
</div>
</div>
</div>
)
}
Example #8
| Source File: index.jsx From ui with MIT License | 4 votes |
|
DataProcessingPage = ({ experimentId, experimentData }) => {
const dispatch = useDispatch();
const { navigateTo } = useAppRouter();
const pipelineStatus = useSelector(getBackendStatus(experimentId))?.status?.pipeline;
const processingConfig = useSelector((state) => state.experimentSettings.processing);
const sampleKeys = useSelector((state) => state.experimentSettings.info.sampleIds);
const samples = useSelector((state) => state.samples);
const pipelineStatusKey = pipelineStatus?.status;
const pipelineRunning = pipelineStatusKey === 'RUNNING';
// Pipeline is not loaded (either running or in an errored state)
const pipelineErrors = ['FAILED', 'TIMED_OUT', 'ABORTED'];
const pipelineHadErrors = pipelineErrors.includes(pipelineStatusKey);
const pipelineNotFinished = pipelineRunning || pipelineHadErrors;
const completedSteps = pipelineStatus?.completedSteps || [];
const changedQCFilters = useSelector(
(state) => state.experimentSettings.processing.meta.changedQCFilters,
);
const changesOutstanding = Boolean(changedQCFilters.size);
const [stepIdx, setStepIdx] = useState(0);
const [runQCModalVisible, setRunQCModalVisible] = useState(false);
const [inputsList, setInputsList] = useState([]);
useEffect(() => {
// If processingConfig is not loaded then reload
if (Object.keys(processingConfig).length <= 1) {
dispatch(loadProcessingSettings(experimentId));
}
dispatch(loadSamples(experimentId));
dispatch(loadCellSets(experimentId));
}, []);
// Checks if the step is in the 'completed steps' list we get from the pipeline status
const isStepComplete = (stepName) => {
if (stepName === undefined) {
return true;
}
const lowerCaseStepName = stepName.toLowerCase();
const stepAppearances = _.filter(
completedSteps,
(stepPipelineName) => stepPipelineName.toLowerCase().includes(lowerCaseStepName),
);
return stepAppearances.length > 0;
};
const onConfigChange = useCallback((key) => {
dispatch(addChangedQCFilter(key));
});
const prefixSampleName = (name) => {
// eslint-disable-next-line no-param-reassign
if (!name.match(/$sample/ig)) name = `Sample ${name}`;
return name;
};
useEffect(() => {
if (sampleKeys && sampleKeys.length > 0 && Object.keys(samples).filter((key) => key !== 'meta').length > 0) {
const list = sampleKeys?.map((sampleId) => ({
key: sampleId,
headerName: prefixSampleName(samples[sampleId].name),
params: { key: sampleId },
}));
setInputsList(list);
}
}, [samples, sampleKeys]);
const steps = [
{
key: 'classifier',
name: getUserFriendlyQCStepName('classifier'),
description: 'The Classifier filter is based on the ‘emptyDrops’ method which distinguishes between droplets containing cells and ambient RNA. Droplets are filtered based on the False Discovery Rate (FDR) value - the red line on the density plot. In the knee plot, the ‘mixed’ population shown in grey contains some cells that are filtered out and some that remain and can be filtered further in the next filter.',
multiSample: true,
render: (key) => (
<SingleComponentMultipleDataContainer
defaultActiveKey={sampleKeys}
inputsList={inputsList}
baseComponentRenderer={(sample) => (
<Classifier
id='classifier'
experimentId={experimentId}
filtering
key={key}
sampleId={sample.key}
sampleIds={sampleKeys}
onConfigChange={() => onConfigChange(key)}
stepDisabled={!processingConfig[key]?.enabled}
/>
)}
/>
),
},
{
key: 'cellSizeDistribution',
name: getUserFriendlyQCStepName('cellSizeDistribution'),
description: 'The number of unique molecular identifiers (#UMIs) per cell distinguishes real cells (high #UMIs per cell) from empty droplets (low #UMIs per cell). This filter is used to detect empty droplets and fine-tunes the Classifier filter. In some datasets this filter might be used instead of the Classifier filter.',
multiSample: true,
render: (key) => (
<SingleComponentMultipleDataContainer
defaultActiveKey={sampleKeys}
inputsList={inputsList}
baseComponentRenderer={(sample) => (
<CellSizeDistribution
experimentId={experimentId}
filtering
key={key}
sampleId={sample.key}
sampleIds={sampleKeys}
onConfigChange={() => onConfigChange(key)}
stepDisabled={!processingConfig[key].enabled}
/>
)}
/>
),
},
{
key: 'mitochondrialContent',
name: getUserFriendlyQCStepName('mitochondrialContent'),
description: 'A high percentage of mitochondrial reads is an indicator of cell death. UMIs mapped to mitochondrial genes are calculated as a percentage of total UMIs. The percentage of mitochondrial reads depends on the cell type. The typical cut-off range is 10-50%, with the default cut-off set to 3 median absolute deviations above the median.',
multiSample: true,
render: (key) => (
<SingleComponentMultipleDataContainer
defaultActiveKey={sampleKeys}
inputsList={inputsList}
baseComponentRenderer={(sample) => (
<MitochondrialContent
experimentId={experimentId}
filtering
key={key}
sampleId={sample.key}
sampleIds={sampleKeys}
onConfigChange={() => onConfigChange(key)}
stepDisabled={!processingConfig[key].enabled}
/>
)}
/>
),
},
{
key: 'numGenesVsNumUmis',
name: getUserFriendlyQCStepName('numGenesVsNumUmis'),
description: 'The number of expressed genes per cell and number of UMIs per cell is expected to have a linear relationship. This filter is used to exclude outliers (e.g. many UMIs originating from only a few genes).',
multiSample: true,
render: (key) => (
<SingleComponentMultipleDataContainer
defaultActiveKey={sampleKeys}
inputsList={inputsList}
baseComponentRenderer={(sample) => (
<GenesVsUMIs
experimentId={experimentId}
filtering
key={key}
sampleId={sample.key}
sampleIds={sampleKeys}
onConfigChange={() => onConfigChange(key)}
stepDisabled={!processingConfig[key].enabled}
/>
)}
/>
),
},
{
key: 'doubletScores',
name: getUserFriendlyQCStepName('doubletScores'),
description:
<span>
Droplets may contain more than one cell.
In such cases, it is not possible to distinguish which reads came from which cell.
Such “cells” cause problems in the downstream analysis as they appear as an intermediate type.
“Cells” with a high probability of being a doublet should be excluded.
The probability of being a doublet is calculated using ‘scDblFinder’.
For each sample, the default threshold tries to minimize both the deviation in the
expected number of doublets and the error of a trained classifier. For more details see
{' '}
<a href='https://bioconductor.org/packages/devel/bioc/vignettes/scDblFinder/inst/doc/scDblFinder.html#thresholding' rel='noreferrer' target='_blank'>scDblFinder thresholding</a>
.
</span>,
multiSample: true,
render: (key) => (
<SingleComponentMultipleDataContainer
defaultActiveKey={sampleKeys}
inputsList={inputsList}
baseComponentRenderer={(sample) => (
<DoubletScores
experimentId={experimentId}
filtering
key={key}
sampleId={sample.key}
sampleIds={sampleKeys}
onConfigChange={() => onConfigChange(key)}
stepDisabled={!processingConfig[key].enabled}
/>
)}
/>
),
},
{
key: 'dataIntegration',
name: getUserFriendlyQCStepName('dataIntegration'),
multiSample: false,
render: (key, expId) => (
<DataIntegration
experimentId={expId}
key={key}
onConfigChange={() => onConfigChange(key)}
disableDataIntegration={sampleKeys && sampleKeys.length === 1}
/>
),
},
{
key: 'configureEmbedding',
name: getUserFriendlyQCStepName('configureEmbedding'),
description: 'Cells and clusters are visualized in a 2-dimensional embedding. The UMAP or t-SNE embedding plot can be selected and customized. The clustering method (e.g. Louvain) and resolution are set here.',
multiSample: false,
render: (key, expId) => (
<ConfigureEmbedding
experimentId={expId}
key={key}
onConfigChange={() => onConfigChange(key)}
/>
),
},
];
const currentStep = steps[stepIdx];
// check that the order and identities of the QC steps above match
// the canonical representation
console.assert(_.isEqual(qcSteps, steps.map((s) => s.key)));
const changeStepId = (newStepIdx) => {
setStepIdx(newStepIdx);
};
const renderRunButton = (runMessage, useSmall = true) => (
<Tooltip title='Run data processing with the changed settings'>
<Button
data-testid='runFilterButton'
type='primary'
onClick={() => setRunQCModalVisible(true)}
style={{ minWidth: '80px' }}
size={useSmall ? 'small' : 'medium'}
>
{runMessage}
</Button>
</Tooltip>
);
const renderRunOrDiscardButtons = () => {
if (pipelineHadErrors) {
return renderRunButton('Run Data Processing', false);
} if (changesOutstanding) {
return (
<Alert
message={<>Your new settings are not yet applied</>}
type='info'
showIcon
style={{
paddingTop: '3px', paddingBottom: '3px', paddingLeft: '10px', paddingRight: '10px',
}}
action={(
<Space size='small'>
{renderRunButton('Run', true)}
<Tooltip title='Discard your changes since the last run'>
<Button
id='discardChangesButton'
data-testid='discardChangesButton'
type='primary'
onClick={() => { dispatch(discardChangedQCFilters()); }}
style={{ width: '80px' }}
size='small'
>
Discard
</Button>
</Tooltip>
</Space>
)}
/>
);
}
};
// Called when the pipeline is triggered to be run by the user.
const onPipelineRun = () => {
setRunQCModalVisible(false);
dispatch(runQC(experimentId));
};
const renderTitle = () => {
const stepEnabled = processingConfig[currentStep.key]?.enabled;
const prefiltered = processingConfig[currentStep.key]?.prefiltered || false;
return (
<>
<Row justify='space-between'>
<Col style={{ paddingBottom: '8px' }}>
{/* Should be just wide enough that no ellipsis appears */}
<Row>
<Col style={{ paddingBottom: '8px', paddingRight: '8px' }}>
<Space size='small'>
<Select
value={stepIdx}
onChange={(idx) => {
changeStepId(idx);
}}
style={{ fontWeight: 'bold', width: 290 }}
placeholder='Jump to a step...'
>
{
steps.map(
({ name, key }, i) => {
const disabledByPipeline = (pipelineNotFinished && !isStepComplete(key));
const text = `${i + 1}. ${name}`;
return (
<Option
value={i}
key={key}
disabled={
disabledByPipeline
}
>
{processingConfig[key]?.enabled === false ? (
<>
{/* disabled */}
<Text
type='secondary'
>
<CloseOutlined />
</Text>
<span
style={{ marginLeft: '0.25rem', textDecoration: 'line-through' }}
>
{text}
</span>
</>
) : !disabledByPipeline ? (
<>
{/* finished */}
<Text
type='success'
>
<CheckOutlined />
</Text>
<span
style={{ marginLeft: '0.25rem' }}
>
{text}
</span>
</>
) : pipelineRunning && !isStepComplete(key) ? (
<>
{/* incomplete */}
<Text
type='warning'
strong
>
<EllipsisOutlined />
</Text>
<span style={{ marginLeft: '0.25rem' }}>{text}</span>
</>
) : pipelineNotFinished
&& !pipelineRunning
&& !isStepComplete(key) ? (
<>
<Text
type='danger'
strong
>
<WarningOutlined />
</Text>
<span style={{ marginLeft: '0.25rem' }}>{text}</span>
</>
) : <></>}
</Option>
);
},
)
}
</Select>
{currentStep.description && (
<Tooltip title={currentStep.description}>
<Button icon={<InfoCircleOutlined />} />
</Tooltip>
)}
{currentStep.multiSample && (
<Tooltip title={`${!stepEnabled ? 'Enable this filter' : 'Disable this filter'}`}>
<Button
disabled={prefiltered}
data-testid='enableFilterButton'
onClick={async () => {
await dispatch(saveProcessingSettings(experimentId, currentStep.key));
if (!processingConfig.meta.saveSettingsError) {
dispatch(setQCStepEnabled(
currentStep.key, !stepEnabled,
));
}
}}
>
{
stepEnabled ? 'Disable' : 'Enable'
}
</Button>
</Tooltip>
)}
</Space>
</Col>
<Col>
{renderRunOrDiscardButtons()}
</Col>
</Row>
</Col>
<Col>
<Row align='middle' justify='space-between'>
<Col>
<StatusIndicator
experimentId={experimentId}
allSteps={steps}
currentStep={stepIdx}
completedSteps={completedSteps}
/>
<Space size='small'>
<Tooltip title='Previous'>
<Button
data-testid='pipelinePrevStep'
disabled={stepIdx === 0}
icon={<LeftOutlined />}
onClick={() => changeStepId(Math.max(stepIdx - 1, 0))}
size='small'
/>
</Tooltip>
{stepIdx !== steps.length - 1 ? (
<Tooltip title='Next'>
<Button
data-testid='pipelineNextStep'
onClick={() => {
const newStepIdx = Math.min(stepIdx + 1, steps.length - 1);
changeStepId(newStepIdx);
}}
disabled={steps[stepIdx + 1] !== undefined
&& pipelineNotFinished
&& !isStepComplete(steps[stepIdx + 1].key)}
icon={<RightOutlined />}
size='small'
/>
</Tooltip>
)
: (
<Tooltip title='Finish QC'>
<Button
type='primary'
disabled={steps[stepIdx + 1]
&& pipelineNotFinished
&& !isStepComplete(steps[stepIdx + 1].key)}
icon={<CheckOutlined />}
size='small'
onClick={() => navigateTo(modules.DATA_EXPLORATION, { experimentId })}
/>
</Tooltip>
)}
</Space>
</Col>
</Row>
</Col>
</Row>
</>
);
};
const renderContent = () => {
const { render, key } = currentStep;
if (pipelineRunning && !isStepComplete(key)) {
return <div><PipelineRedirectToDataProcessing pipelineStatus='runningStep' /></div>;
}
if (pipelineNotFinished && !isStepComplete(key)) {
return (
<div>
<div style={{ display: 'flex', justifyContent: 'center' }}>
<PlatformError
description={'We don\'t have anything for this step.'}
reason='The last run ended before this step could be finished.'
onClick={() => { onPipelineRun(); }}
/>
</div>
</div>
);
}
if (samples.meta.loading
|| processingConfig.meta.loading
|| Object.keys(processingConfig).length <= 1
) {
return (
<div className='preloadContextSkeleton' style={{ padding: '16px 0px' }}>
<Skeleton.Input style={{ width: '100%', height: 400 }} active />
</div>
);
}
if (samples.meta.error || processingConfig.meta.loadingSettingsError) {
return (
<PlatformError
error={samples.meta.error.toString()
|| processingConfig.meta.loadingSettingsError.toString()}
onClick={() => { dispatch(loadSamples(experimentId)); }}
/>
);
}
return (
<Space direction='vertical' style={{ width: '100%' }}>
{
'enabled' in processingConfig[key] && !processingConfig[key].enabled ? (
<Alert
message={processingConfig[key]?.prefiltered
? 'This filter is disabled because the one of the sample(s) is pre-filtered. Click \'Next\' to continue processing your data.'
: 'This filter is disabled. You can still modify and save changes, but the filter will not be applied to your data.'}
type='info'
showIcon
/>
) : <></>
}
{render(key, experimentId)}
</Space>
);
};
return (
<>
<Header
experimentId={experimentId}
experimentData={experimentData}
title='Data Processing'
/>
<Space direction='vertical' style={{ width: '100%', padding: '0 10px' }}>
{runQCModalVisible && (
<Modal
title='Run data processing with the changed settings'
visible
onCancel={() => setRunQCModalVisible(false)}
onOk={() => onPipelineRun()}
okText='Start'
>
<p>
This might take several minutes.
Your navigation within Cellenics will be restricted during this time.
Do you want to start?
</p>
</Modal>
)}
<Card
title={renderTitle()}
>
{renderContent()}
</Card>
</Space>
</>
);
}
Example #9
| Source File: index.js From bank-client with MIT License | 4 votes |
|
function PaymentAction({ intl, onValidateFields, steps }) {
const {
isLoading,
currentStep,
error,
authorizationKey,
hasCreatedTransaction,
} = useSelector(stateSelector);
const dispatch = useDispatch();
const snippets = {
success: {
title: intl.formatMessage(messages.transferConfirmedTitle),
description: intl.formatMessage(messages.transferConfirmedDescription),
},
};
const onChangeInput = (event) => dispatch(changeInputAction(event.target));
const onPreviousStep = () => dispatch(previousStepAction());
const onGetAuthorizationKey = () => dispatch(getAuthorizationKeyAction());
const onCreateTransaction = () => dispatch(createTransactionAction());
const onConfirmTransaction = () =>
dispatch(confirmTransactionAction(snippets));
return (
<StyledFormActionsWrapper>
{currentStep < steps.length - 1 && (
<StyledButton
disabled={isLoading || !!error}
type="primary"
onClick={onValidateFields}
errored={error ? 1 : 0}
>
{(isLoading && <LoadingIndicator />) ||
(error && <StyledError>{error}</StyledError>) ||
(!error && !isLoading && (
<>
<FormattedMessage {...messages.next} /> <RightOutlined />
</>
))}
</StyledButton>
)}
{currentStep === steps.length - 1 && (
<>
<StyledButton
onClick={onCreateTransaction}
type="primary"
disabled={isLoading || !!error || hasCreatedTransaction}
errored={error && !authorizationKey ? 1 : 0}
>
{(hasCreatedTransaction && (
<FormattedMessage {...messages.authorizationKeySent} />
)) ||
(!hasCreatedTransaction && isLoading && <LoadingIndicator />) ||
(!hasCreatedTransaction && (
<>
<FormattedMessage {...messages.receive} /> <RightOutlined />
</>
))}
</StyledButton>
{hasCreatedTransaction && (
<>
<CreatedTransactionWrapper>
<FormattedMessage {...messages.placeholder}>
{(placeholder) => (
<Input
onPressEnter={onConfirmTransaction}
onKeyPress={disabledSpacesInput}
onChange={(event) => onChangeInput(event)}
name="authorizationKey"
value={authorizationKey}
placeholder={placeholder}
/>
)}
</FormattedMessage>
<StyledButton
type="primary"
disabled={isLoading || !!error || !authorizationKey}
errored={error ? 1 : 0}
onClick={onConfirmTransaction}
>
{(isLoading && <LoadingIndicator />) ||
(!isLoading && error && authorizationKey && (
<StyledError>{error}</StyledError>
)) ||
(!error && !isLoading && (
<FormattedMessage {...messages.make} />
))}
</StyledButton>
</CreatedTransactionWrapper>
<AuthorizationKeyWrapper>
<StyledButton
type="link"
onClick={onGetAuthorizationKey}
disabled={authorizationKey}
>
<FormattedMessage {...messages.dontGetAuthrozationKey} />
</StyledButton>
</AuthorizationKeyWrapper>
</>
)}
</>
)}
{currentStep > 0 && (
<StyledButton
disabled={isLoading}
type="link"
back="true"
onClick={onPreviousStep}
>
<LeftOutlined /> <FormattedMessage {...messages.previous} />
</StyledButton>
)}
</StyledFormActionsWrapper>
);
}
Example #10
| Source File: MainContent.jsx From stack-labs-site with MIT License | 4 votes |
|
render() {
return (
<SiteContext.Consumer>
{({ isMobile }) => {
const { theme, setIframeTheme } = this.context;
const { openKeys } = this.state;
const {
localizedPageData,
demos,
intl: { formatMessage },
} = this.props;
const { meta } = localizedPageData;
const activeMenuItem = this.getActiveMenuItem();
const menuItems = this.getMenuItems();
const menuItemsForFooterNav = this.getMenuItems({
before: <LeftOutlined className="footer-nav-icon-before" />,
after: <RightOutlined className="footer-nav-icon-after" />,
});
const { prev, next } = this.getFooterNav(menuItemsForFooterNav, activeMenuItem);
const mainContainerClass = classNames('main-container', {
'main-container-component': !!demos,
});
const menuChild = (
<Menu
inlineIndent={30}
className="aside-container menu-site"
mode="inline"
openKeys={openKeys}
selectedKeys={[activeMenuItem]}
onOpenChange={this.handleMenuOpenChange}
>
{menuItems}
</Menu>
);
const componentPage = /^\/?components/.test(this.props.location.pathname);
return (
<div className="main-wrapper">
<Row>
{isMobile ? (
<MobileMenu key="Mobile-menu" wrapperClassName="drawer-wrapper">
{menuChild}
</MobileMenu>
) : (
<Col xxl={4} xl={5} lg={6} md={6} sm={24} xs={24} className="main-menu">
<Affix>
<section className="main-menu-inner">{menuChild}</section>
</Affix>
</Col>
)}
<Col xxl={20} xl={19} lg={18} md={18} sm={24} xs={24}>
<section className={mainContainerClass}>
{demos ? (
<ComponentDoc
{...this.props}
doc={localizedPageData}
demos={demos}
theme={theme}
setIframeTheme={setIframeTheme}
/>
) : (
<Article {...this.props} content={localizedPageData} />
)}
<ContributorsList
className="contributors-list"
fileName={meta.filename}
renderItem={(item, loading) =>
loading ? (
<Avatar style={{ opacity: 0.3 }} />
) : (
<Tooltip
title={`${formatMessage({ id: 'app.content.contributors' })}: ${
item.username
}`}
key={item.username}
>
<a
href={`https://github.com/${item.username}`}
target="_blank"
rel="noopener noreferrer"
>
<Avatar src={item.url}>{item.username}</Avatar>
</a>
</Tooltip>
)
}
repo="ant-design"
owner="ant-design"
/>
</section>
{componentPage && (
<div className="fixed-widgets">
<Dropdown overlay={this.getThemeSwitchMenu()} placement="topCenter">
<Avatar className="fixed-widgets-avatar" size={44} icon={<ThemeIcon />} />
</Dropdown>
</div>
)}
<PrevAndNext prev={prev} next={next} />
<Footer />
</Col>
</Row>
</div>
);
}}
</SiteContext.Consumer>
);
}
Example #11
| Source File: direction.jsx From virtuoso-design-system with MIT License | 4 votes |
|
// ==== End Badge ====
render() {
const { currentStep } = this.state;
return (
<div className="direction-components">
<Row>
<Col span={24}>
<Divider orientation="left">Cascader example</Divider>
<Cascader
suffixIcon={<SearchIcon />}
options={cascaderOptions}
onChange={this.onCascaderChange}
placeholder="یک مورد انتخاب کنید"
popupPlacement={this.props.popupPlacement}
/>
With search:
<Cascader
suffixIcon={<SmileOutlined />}
options={cascaderOptions}
onChange={this.onCascaderChange}
placeholder="Select an item"
popupPlacement={this.props.popupPlacement}
showSearch={this.cascaderFilter}
/>
</Col>
</Row>
<br />
<Row>
<Col span={12}>
<Divider orientation="left">Switch example</Divider>
<Switch defaultChecked />
<Switch loading defaultChecked />
<Switch size="small" loading />
</Col>
<Col span={12}>
<Divider orientation="left">Radio Group example</Divider>
<Radio.Group defaultValue="c" buttonStyle="solid">
<Radio.Button value="a">تهران</Radio.Button>
<Radio.Button value="b" disabled>
اصفهان
</Radio.Button>
<Radio.Button value="c">فارس</Radio.Button>
<Radio.Button value="d">خوزستان</Radio.Button>
</Radio.Group>
</Col>
</Row>
<br />
<Row>
<Col span={12}>
<Divider orientation="left">Button example</Divider>
<div className="button-demo">
<Button type="primary" icon={<DownloadOutlined />} />
<Button type="primary" shape="circle" icon={<DownloadOutlined />} />
<Button type="primary" shape="round" icon={<DownloadOutlined />} />
<Button type="primary" shape="round" icon={<DownloadOutlined />}>
Download
</Button>
<Button type="primary" icon={<DownloadOutlined />}>
Download
</Button>
<br />
<Button.Group>
<Button type="primary">
<LeftOutlined />
Backward
</Button>
<Button type="primary">
Forward
<RightOutlined />
</Button>
</Button.Group>
<Button type="primary" loading>
Loading
</Button>
<Button type="primary" size="small" loading>
Loading
</Button>
</div>
</Col>
<Col span={12}>
<Divider orientation="left">Tree example</Divider>
<Tree
showLine
checkable
defaultExpandedKeys={['0-0-0', '0-0-1']}
defaultSelectedKeys={['0-0-0', '0-0-1']}
defaultCheckedKeys={['0-0-0', '0-0-1']}
>
<TreeNode title="parent 1" key="0-0">
<TreeNode title="parent 1-0" key="0-0-0" disabled>
<TreeNode title="leaf" key="0-0-0-0" disableCheckbox />
<TreeNode title="leaf" key="0-0-0-1" />
</TreeNode>
<TreeNode title="parent 1-1" key="0-0-1">
<TreeNode title={<span style={{ color: '#1890ff' }}>sss</span>} key="0-0-1-0" />
</TreeNode>
</TreeNode>
</Tree>
</Col>
</Row>
<br />
<Row>
<Col span={24}>
<Divider orientation="left">Input (Input Group) example</Divider>
<InputGroup size="large">
<Row gutter={8}>
<Col span={5}>
<Input defaultValue="0571" />
</Col>
<Col span={8}>
<Input defaultValue="26888888" />
</Col>
</Row>
</InputGroup>
<br />
<InputGroup compact>
<Input style={{ width: '20%' }} defaultValue="0571" />
<Input style={{ width: '30%' }} defaultValue="26888888" />
</InputGroup>
<br />
<InputGroup compact>
<Select defaultValue="Option1">
<Option value="Option1">Option1</Option>
<Option value="Option2">Option2</Option>
</Select>
<Input style={{ width: '50%' }} defaultValue="input content" />
<InputNumber />
</InputGroup>
<br />
<Search placeholder="input search text" enterButton="Search" size="large" />
<br />
<br />
<div style={{ marginBottom: 16 }}>
<Input
addonBefore={this.selectBefore}
addonAfter={this.selectAfter}
defaultValue="mysite"
/>
</div>
<br />
<Row>
<Col span={12}>
<Divider orientation="left">Select example</Divider>
<Select mode="multiple" defaultValue="مورچه" style={{ width: 120 }}>
<Option value="jack">Jack</Option>
<Option value="مورچه">مورچه</Option>
<Option value="disabled" disabled>
Disabled
</Option>
<Option value="Yiminghe">yiminghe</Option>
</Select>
<Select defaultValue="مورچه" style={{ width: 120 }} disabled>
<Option value="مورچه">مورچه</Option>
</Select>
<Select defaultValue="مورچه" style={{ width: 120 }} loading>
<Option value="مورچه">مورچه</Option>
</Select>
<Select
showSearch
style={{ width: 200 }}
placeholder="Select a person"
optionFilterProp="children"
filterOption={(input, option) =>
option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
}
>
<Option value="jack">Jack</Option>
<Option value="سعید">سعید</Option>
<Option value="tom">Tom</Option>
</Select>
</Col>
<Col span={12}>
<Divider orientation="left">TreeSelect example</Divider>
<div>
<TreeSelect
showSearch
style={{ width: '100%' }}
dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
placeholder="Please select"
allowClear
treeDefaultExpandAll
>
<TreeNode value="parent 1" title="parent 1" key="0-1">
<TreeNode value="parent 1-0" title="parent 1-0" key="0-1-1">
<TreeNode value="leaf1" title="my leaf" key="random" />
<TreeNode value="leaf2" title="your leaf" key="random1" />
</TreeNode>
<TreeNode value="parent 1-1" title="parent 1-1" key="random2">
<TreeNode
value="sss"
title={<b style={{ color: '#08c' }}>sss</b>}
key="random3"
/>
</TreeNode>
</TreeNode>
</TreeSelect>
</div>
</Col>
</Row>
<br />
<Row>
<Col span={24}>
<Divider orientation="left">Modal example</Divider>
<div>
<Button type="primary" onClick={this.showModal}>
Open Modal
</Button>
<Modal
title="پنچره ساده"
visible={this.state.modalVisible}
onOk={this.handleOk}
onCancel={this.handleCancel}
>
<p>نگاشتههای خود را اینجا قراردهید</p>
<p>نگاشتههای خود را اینجا قراردهید</p>
<p>نگاشتههای خود را اینجا قراردهید</p>
</Modal>
</div>
</Col>
</Row>
<br />
<Row>
<Col span={24}>
<Divider orientation="left">Steps example</Divider>
<div>
<Steps progressDot current={currentStep}>
<Step title="Finished" description="This is a description." />
<Step title="In Progress" description="This is a description." />
<Step title="Waiting" description="This is a description." />
</Steps>
<br />
<Steps current={currentStep} onChange={this.onStepsChange}>
<Step title="Step 1" description="This is a description." />
<Step title="Step 2" description="This is a description." />
<Step title="Step 3" description="This is a description." />
</Steps>
</div>
</Col>
</Row>
<br />
<Row>
<Col span={12}>
<Divider orientation="left">Rate example</Divider>
<div>
<Rate defaultValue={2.5} />
<br />
<strong>* Note:</strong> Half star not implemented in RTL direction, it will be
supported after <a href="https://github.com/react-component/rate">rc-rate</a>{' '}
implement rtl support.
</div>
</Col>
<Col span={12}>
<Divider orientation="left">Badge example</Divider>
<div>
<div>
<Badge count={this.state.badgeCount}>
<a href="#" className="head-example" />
</Badge>
<ButtonGroup>
<Button onClick={this.declineBadge}>
<MinusOutlined />
</Button>
<Button onClick={this.increaseBadge}>
<PlusOutlined />
</Button>
</ButtonGroup>
</div>
<div style={{ marginTop: 10 }}>
<Badge dot={this.state.showBadge}>
<a href="#" className="head-example" />
</Badge>
<Switch onChange={this.onChangeBadge} checked={this.state.showBadge} />
</div>
</div>
</Col>
</Row>
</Col>
</Row>
<br />
<br />
<Row>
<Col span={24}>
<Divider orientation="left">Pagination example</Divider>
<Pagination showSizeChanger defaultCurrent={3} total={500} />
</Col>
</Row>
<br />
<Row>
<Col span={24}>
<Divider orientation="left">Grid System example</Divider>
<div className="grid-demo">
<div className="code-box-demo">
<p>
<strong>* Note:</strong> Every calculation in RTL grid system is from right side
(offset, push, etc.)
</p>
<Row>
<Col span={8}>col-8</Col>
<Col span={8} offset={8}>
col-8
</Col>
</Row>
<Row>
<Col span={6} offset={6}>
col-6 col-offset-6
</Col>
<Col span={6} offset={6}>
col-6 col-offset-6
</Col>
</Row>
<Row>
<Col span={12} offset={6}>
col-12 col-offset-6
</Col>
</Row>
<Row>
<Col span={18} push={6}>
col-18 col-push-6
</Col>
<Col span={6} pull={18}>
col-6 col-pull-18
</Col>
</Row>
</div>
</div>
</Col>
</Row>
</div>
);
}
