@ant-design/icons#BgColorsOutlined TypeScript Examples
The following examples show how to use
@ant-design/icons#BgColorsOutlined.
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.tsx From web-pdm with Apache License 2.0 | 6 votes |
|
IconRenders = {
undo: <RollbackOutlined />,
redo: <RollbackOutlined style={{ transform: 'scaleX(-1)' }} />,
min: <ZoomOutOutlined />,
max: <ZoomInOutlined />,
full: <BorderOutlined />,
miniMap: <PictureFilled />,
miniMapNo: <PictureOutlined />,
dagreLayout: <PartitionOutlined />,
relationLayout: <UngroupOutlined />,
reload: <ReloadOutlined />,
image: <DownloadOutlined />,
darkness: <SnippetsFilled />,
light: <SnippetsOutlined />,
colorClose: <BgColorsOutlined />,
colorOpen: <BgColorsOutlined />
}
Example #2
| Source File: out.tsx From web-pdm with Apache License 2.0 | 6 votes |
|
IconRenders = {
undo: <RollbackOutlined />,
redo: <RollbackOutlined style={{ transform: 'scaleX(-1)' }} />,
min: <ZoomOutOutlined />,
max: <ZoomInOutlined />,
full: <BorderOutlined />,
miniMap: <PictureFilled />,
miniMapNo: <PictureOutlined />,
dagreLayout: <PartitionOutlined />,
relationLayout: <UngroupOutlined />,
reload: <ReloadOutlined />,
image: <DownloadOutlined />,
darkness: <SnippetsFilled />,
light: <SnippetsOutlined />,
colorClose: <BgColorsOutlined />,
colorOpen: <BgColorsOutlined />
}
Example #3
| Source File: ColorSet.tsx From datart with Apache License 2.0 | 6 votes |
|
ColorSet: FC<{
filedName: NamePath;
filedValue: string;
}> = memo(({ filedValue, filedName }) => {
const widgetContent = (
<Form.Item noStyle name={filedName} preserve>
<SingleColorSelection color={filedValue} />
</Form.Item>
);
return (
<StyledWrap>
<Popover content={widgetContent} title={filedName} placement="left">
<StyledColorIcon color={filedValue}>
<BgColorsOutlined />
</StyledColorIcon>
</Popover>
</StyledWrap>
);
})
Example #4
| Source File: MainMenu.tsx From mayoor with MIT License | 5 votes |
|
MainMenu: React.FC = () => {
const { t } = useTranslation();
const { currentUser } = useAppState();
return (
<StyledMenu>
<li>
<CategoryName>{t('Orders')}</CategoryName>
<LinkItem icon={<PlusCircleOutlined />} name={t('Add order')} to={'/orders/new'} />
<LinkItem
icon={<FileSearchOutlined />}
name={t('List orders')}
to={'/orders/list'}
/>
<LinkItem
icon={<BgColorsOutlined />}
name={t('To be printed')}
to={'/orders/print'}
/>
<LinkItem
icon={<HighlightOutlined />}
name={t('Waiting for production')}
to={'/orders/production'}
/>
</li>
<li>
<CategoryName>{t('Customers')}</CategoryName>
<LinkItem
icon={<UserAddOutlined />}
name={t('Add customer')}
to={'/customers/new'}
/>
<LinkItem icon={<TeamOutlined />} name={t('Customers')} to={'/customers/list'} />
</li>
{currentUser?.role === UserRole.EXECUTIVE && (
<li>
<CategoryName>{t('Administration')}</CategoryName>
<LinkItem icon={<FileTextOutlined />} name={t('Material')} to={'/materials'} />
<LinkItem icon={<TeamOutlined />} name={t('Users')} to={'/users'} />
</li>
)}
</StyledMenu>
);
}
Example #5
| Source File: CustomInlineEditor.tsx From dnde with GNU General Public License v3.0 | 4 votes |
|
InlineEditor = () => {
const ref = useRef<any>(null);
const { x, y } = useCustomEditorPosition();
const { active } = useCustomEditorStatus();
const { active: activeElement }: { active: HTMLDivElement } = useHtmlWrapper();
const { mjmlJson, setMjmlJson } = useEditor();
const [fontlist] = useFonts();
// on mount, override the default behaviour of the antd dropdown select
useEffect(() => {
if (ref.current) {
const toolbar = document.querySelectorAll('#customtoolbar .ant-select-selector');
if (toolbar) {
toolbar.forEach((item) => {
logger.log('attaching click event listener to container');
item.addEventListener('click', ResetEventBehaviour);
});
return () =>
toolbar.forEach((item) => {
logger.log('removing click event listener to container');
item.removeEventListener('click', ResetEventBehaviour);
});
}
}
}, [ref]);
useEffect(() => {
if (active && activeElement) {
const uniqueIdentifier = findUniqueIdentifier(activeElement, activeElement.classList);
if (uniqueIdentifier?.includes('mj-text')) {
let editor: any = activeElement.children[0].children[0];
const Event = (e: any) => {
stateChangeCallback(editor, mjmlJson, setMjmlJson);
// e.stopPropagation();
// e.preventDefault();
// e.target.focus();
// return false;
};
const onKeyUp = () => {
r = window.getSelection()?.getRangeAt(0);
};
editor.addEventListener('focusout', Event, true);
editor.addEventListener('keyup', onKeyUp, false);
editor.addEventListener('click', onKeyUp, false);
editor.classList.add('editor-active');
editor.setAttribute('contentEditable', 'true');
editor.setAttribute('spellcheck', 'false');
if (r) {
// restoreSelection();
}
return () => {
logger.log('custom editor: cleaning up dynamic attributes');
editor.removeEventListener('focusout', Event, true);
editor.removeEventListener('keyup', onKeyUp, false);
editor.removeEventListener('click', onKeyUp, false);
};
}
}
}, [activeElement, mjmlJson]);
return (
<div
style={{
display: active ? 'block' : 'none',
position: 'fixed',
top: `${y}px`,
left: `${x}px`,
padding: '4px 8px',
border: '1px solid black',
zIndex: 999,
backgroundColor: '#fff',
transition: 'all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1)',
}}
id="customtoolbar"
ref={ref}
onMouseDown={ResetEventBehaviour}
>
<Select
size="small"
dropdownStyle={{ minWidth: '18px' }}
defaultValue={2}
style={{ fontSize: '12px' }}
onChange={(value: any) => {
InlineEditorActions(null, 'size', value);
}}
>
{Array.from(Array(7).keys()).map((i) => (
<Select.Option
onMouseDown={ResetEventBehaviour}
onFocus={ResetEventBehaviour}
style={{ fontSize: '12px' }}
value={i + 1}
>
<span onMouseDown={ResetEventBehaviour} onFocus={ResetEventBehaviour}>
{i + 1}
</span>
</Select.Option>
))}
</Select>
<Select
size="small"
defaultValue={'Ubuntu'}
dropdownStyle={{ minWidth: '140px' }}
style={{ fontSize: '12px' }}
onChange={(value: any) => {
InlineEditorActions(null, 'fontFamily', value);
}}
onMouseDown={ResetEventBehaviour}
>
{fontlist.map((font) => (
<Select.Option
onMouseDown={ResetEventBehaviour}
onFocus={ResetEventBehaviour}
style={{ fontSize: '12px' }}
value={font}
>
<span onMouseDown={ResetEventBehaviour} onFocus={ResetEventBehaviour}>
{font}
</span>
</Select.Option>
))}
</Select>
<Popover
overlayClassName="inline-editor-popover-color-picker"
trigger="click"
placement="bottom"
content={
<ColorPicker
handleChange={(color) => {
InlineEditorActions(null, 'fontColor', color);
}}
mouseDown={false}
/>
}
destroyTooltipOnHide={true}
>
<Button icon={<FontColorsOutlined />} style={{ fontSize: '12px' }} size="small"></Button>
</Popover>
<Popover
overlayClassName="inline-editor-popover-color-picker"
trigger="click"
placement="bottom"
content={
<ColorPicker
handleChange={(color) => {
InlineEditorActions(null, 'color', color);
}}
mouseDown={false}
/>
}
destroyTooltipOnHide={true}
>
<Button icon={<BgColorsOutlined />} style={{ fontSize: '12px' }} size="small"></Button>
</Popover>
<Button
icon={<BoldOutlined />}
onClick={(e) => InlineEditorActions(e, 'bold')}
style={{ fontSize: '12px' }}
size="small"
></Button>
<Button
icon={<ItalicOutlined />}
onClick={(e) => InlineEditorActions(e, 'italics')}
style={{ fontSize: '12px' }}
size="small"
></Button>
<Button
icon={<UnderlineOutlined />}
onClick={(e) => InlineEditorActions(e, 'underline')}
style={{ fontSize: '12px' }}
size="small"
></Button>
<LinkItem setLinkCallback={(e) => InlineEditorActions(e, 'link')} />
</div>
);
}
Example #6
| Source File: Icon.tsx From html2sketch with MIT License | 4 votes |
|
IconSymbol: FC = () => {
return (
<Row>
{/*<CaretUpOutlined*/}
{/* className="icon"*/}
{/* symbolName={'1.General/2.Icons/1.CaretUpOutlined'}*/}
{/*/>*/}
{/* className="icon"*/}
{/* symbolName={'1.General/2.Icons/2.MailOutlined'}*/}
{/*/>*/}
{/*<StepBackwardOutlined*/}
{/* className="icon"*/}
{/* symbolName={'1.General/2.Icons/2.StepBackwardOutlined'}*/}
{/*/>*/}
{/*<StepForwardOutlined*/}
{/* className="icon"*/}
{/* symbolName={'1.General/2.Icons/2.StepBackwardOutlined'}*/}
{/*/>*/}
<StepForwardOutlined />
<ShrinkOutlined />
<ArrowsAltOutlined />
<DownOutlined />
<UpOutlined />
<LeftOutlined />
<RightOutlined />
<CaretUpOutlined />
<CaretDownOutlined />
<CaretLeftOutlined />
<CaretRightOutlined />
<VerticalAlignTopOutlined />
<RollbackOutlined />
<FastBackwardOutlined />
<FastForwardOutlined />
<DoubleRightOutlined />
<DoubleLeftOutlined />
<VerticalLeftOutlined />
<VerticalRightOutlined />
<VerticalAlignMiddleOutlined />
<VerticalAlignBottomOutlined />
<ForwardOutlined />
<BackwardOutlined />
<EnterOutlined />
<RetweetOutlined />
<SwapOutlined />
<SwapLeftOutlined />
<SwapRightOutlined />
<ArrowUpOutlined />
<ArrowDownOutlined />
<ArrowLeftOutlined />
<ArrowRightOutlined />
<LoginOutlined />
<LogoutOutlined />
<MenuFoldOutlined />
<MenuUnfoldOutlined />
<BorderBottomOutlined />
<BorderHorizontalOutlined />
<BorderInnerOutlined />
<BorderOuterOutlined />
<BorderLeftOutlined />
<BorderRightOutlined />
<BorderTopOutlined />
<BorderVerticleOutlined />
<PicCenterOutlined />
<PicLeftOutlined />
<PicRightOutlined />
<RadiusBottomleftOutlined />
<RadiusBottomrightOutlined />
<RadiusUpleftOutlined />
<RadiusUprightOutlined />
<FullscreenOutlined />
<FullscreenExitOutlined />
<QuestionOutlined />
<PauseOutlined />
<MinusOutlined />
<PauseCircleOutlined />
<InfoOutlined />
<CloseOutlined />
<ExclamationOutlined />
<CheckOutlined />
<WarningOutlined />
<IssuesCloseOutlined />
<StopOutlined />
<EditOutlined />
<CopyOutlined />
<ScissorOutlined />
<DeleteOutlined />
<SnippetsOutlined />
<DiffOutlined />
<HighlightOutlined />
<AlignCenterOutlined />
<AlignLeftOutlined />
<AlignRightOutlined />
<BgColorsOutlined />
<BoldOutlined />
<ItalicOutlined />
<UnderlineOutlined />
<StrikethroughOutlined />
<RedoOutlined />
<UndoOutlined />
<ZoomInOutlined />
<ZoomOutOutlined />
<FontColorsOutlined />
<FontSizeOutlined />
<LineHeightOutlined />
<SortAscendingOutlined />
<SortDescendingOutlined />
<DragOutlined />
<OrderedListOutlined />
<UnorderedListOutlined />
<RadiusSettingOutlined />
<ColumnWidthOutlined />
<ColumnHeightOutlined />
<AreaChartOutlined />
<PieChartOutlined />
<BarChartOutlined />
<DotChartOutlined />
<LineChartOutlined />
<RadarChartOutlined />
<HeatMapOutlined />
<FallOutlined />
<RiseOutlined />
<StockOutlined />
<BoxPlotOutlined />
<FundOutlined />
<SlidersOutlined />
<AndroidOutlined />
<AppleOutlined />
<WindowsOutlined />
<IeOutlined />
<ChromeOutlined />
<GithubOutlined />
<AliwangwangOutlined />
<DingdingOutlined />
<WeiboSquareOutlined />
<WeiboCircleOutlined />
<TaobaoCircleOutlined />
<Html5Outlined />
<WeiboOutlined />
<TwitterOutlined />
<WechatOutlined />
<AlipayCircleOutlined />
<TaobaoOutlined />
<SkypeOutlined />
<FacebookOutlined />
<CodepenOutlined />
<CodeSandboxOutlined />
<AmazonOutlined />
<GoogleOutlined />
<AlipayOutlined />
<AntDesignOutlined />
<AntCloudOutlined />
<ZhihuOutlined />
<SlackOutlined />
<SlackSquareOutlined />
<BehanceSquareOutlined />
<DribbbleOutlined />
<DribbbleSquareOutlined />
<InstagramOutlined />
<YuqueOutlined />
<AlibabaOutlined />
<YahooOutlined />
<RedditOutlined />
<SketchOutlined />
<AccountBookOutlined />
<AlertOutlined />
<ApartmentOutlined />
<ApiOutlined />
<QqOutlined />
<MediumWorkmarkOutlined />
<GitlabOutlined />
<MediumOutlined />
<GooglePlusOutlined />
<AppstoreAddOutlined />
<AppstoreOutlined />
<AudioOutlined />
<AudioMutedOutlined />
<AuditOutlined />
<BankOutlined />
<BarcodeOutlined />
<BarsOutlined />
<BellOutlined />
<BlockOutlined />
<BookOutlined />
<BorderOutlined />
<BranchesOutlined />
<BuildOutlined />
<BulbOutlined />
<CalculatorOutlined />
<CalendarOutlined />
<CameraOutlined />
<CarOutlined />
<CarryOutOutlined />
<CiCircleOutlined />
<CiOutlined />
<CloudOutlined />
<ClearOutlined />
<ClusterOutlined />
<CodeOutlined />
<CoffeeOutlined />
<CompassOutlined />
<CompressOutlined />
<ContactsOutlined />
<ContainerOutlined />
<ControlOutlined />
<CopyrightCircleOutlined />
<CopyrightOutlined />
<CreditCardOutlined />
<CrownOutlined />
<CustomerServiceOutlined />
<DashboardOutlined />
<DatabaseOutlined />
<DeleteColumnOutlined />
<DeleteRowOutlined />
<DisconnectOutlined />
<DislikeOutlined />
<DollarCircleOutlined />
<DollarOutlined />
<DownloadOutlined />
<EllipsisOutlined />
<EnvironmentOutlined />
<EuroCircleOutlined />
<EuroOutlined />
<ExceptionOutlined />
<ExpandAltOutlined />
<ExpandOutlined />
<ExperimentOutlined />
<ExportOutlined />
<EyeOutlined />
<FieldBinaryOutlined />
<FieldNumberOutlined />
<FieldStringOutlined />
<DesktopOutlined />
<DingtalkOutlined />
<FileAddOutlined />
<FileDoneOutlined />
<FileExcelOutlined />
<FileExclamationOutlined />
<FileOutlined />
<FileImageOutlined />
<FileJpgOutlined />
<FileMarkdownOutlined />
<FilePdfOutlined />
<FilePptOutlined />
<FileProtectOutlined />
<FileSearchOutlined />
<FileSyncOutlined />
<FileTextOutlined />
<FileUnknownOutlined />
<FileWordOutlined />
<FilterOutlined />
<FireOutlined />
<FlagOutlined />
<FolderAddOutlined />
<FolderOutlined />
<FolderOpenOutlined />
<ForkOutlined />
<FormatPainterOutlined />
<FrownOutlined />
<FunctionOutlined />
<FunnelPlotOutlined />
<GatewayOutlined />
<GifOutlined />
<GiftOutlined />
<GlobalOutlined />
<GoldOutlined />
<GroupOutlined />
<HddOutlined />
<HeartOutlined />
<HistoryOutlined />
<HomeOutlined />
<HourglassOutlined />
<IdcardOutlined />
<ImportOutlined />
<InboxOutlined />
<InsertRowAboveOutlined />
<InsertRowBelowOutlined />
<InsertRowLeftOutlined />
<InsertRowRightOutlined />
<InsuranceOutlined />
<InteractionOutlined />
<KeyOutlined />
<LaptopOutlined />
<LayoutOutlined />
<LikeOutlined />
<LineOutlined />
<LinkOutlined />
<Loading3QuartersOutlined />
<LoadingOutlined />
<LockOutlined />
<MailOutlined />
<ManOutlined />
<MedicineBoxOutlined />
<MehOutlined />
<MenuOutlined />
<MergeCellsOutlined />
<MessageOutlined />
<MobileOutlined />
<MoneyCollectOutlined />
<MonitorOutlined />
<MoreOutlined />
<NodeCollapseOutlined />
<NodeExpandOutlined />
<NodeIndexOutlined />
<NotificationOutlined />
<NumberOutlined />
<PaperClipOutlined />
<PartitionOutlined />
<PayCircleOutlined />
<PercentageOutlined />
<PhoneOutlined />
<PictureOutlined />
<PoundCircleOutlined />
<PoundOutlined />
<PoweroffOutlined />
<PrinterOutlined />
<ProfileOutlined />
<ProjectOutlined />
<PropertySafetyOutlined />
<PullRequestOutlined />
<PushpinOutlined />
<QrcodeOutlined />
<ReadOutlined />
<ReconciliationOutlined />
<RedEnvelopeOutlined />
<ReloadOutlined />
<RestOutlined />
<RobotOutlined />
<RocketOutlined />
<SafetyCertificateOutlined />
<SafetyOutlined />
<ScanOutlined />
<ScheduleOutlined />
<SearchOutlined />
<SecurityScanOutlined />
<SelectOutlined />
<SendOutlined />
<SettingOutlined />
<ShakeOutlined />
<ShareAltOutlined />
<ShopOutlined />
<ShoppingCartOutlined />
<ShoppingOutlined />
<SisternodeOutlined />
<SkinOutlined />
<SmileOutlined />
<SolutionOutlined />
<SoundOutlined />
<SplitCellsOutlined />
<StarOutlined />
<SubnodeOutlined />
<SyncOutlined />
<TableOutlined />
<TabletOutlined />
<TagOutlined />
<TagsOutlined />
<TeamOutlined />
<ThunderboltOutlined />
<ToTopOutlined />
<ToolOutlined />
<TrademarkCircleOutlined />
<TrademarkOutlined />
<TransactionOutlined />
<TrophyOutlined />
<UngroupOutlined />
<UnlockOutlined />
<UploadOutlined />
<UsbOutlined />
<UserAddOutlined />
<UserDeleteOutlined />
<UserOutlined />
<UserSwitchOutlined />
<UsergroupAddOutlined />
<UsergroupDeleteOutlined />
<VideoCameraOutlined />
<WalletOutlined />
<WifiOutlined />
<BorderlessTableOutlined />
<WomanOutlined />
<BehanceOutlined />
<DropboxOutlined />
<DeploymentUnitOutlined />
<UpCircleOutlined />
<DownCircleOutlined />
<LeftCircleOutlined />
<RightCircleOutlined />
<UpSquareOutlined />
<DownSquareOutlined />
<LeftSquareOutlined />
<RightSquareOutlined />
<PlayCircleOutlined />
<QuestionCircleOutlined />
<PlusCircleOutlined />
<PlusSquareOutlined />
<MinusSquareOutlined />
<MinusCircleOutlined />
<InfoCircleOutlined />
<ExclamationCircleOutlined />
<CloseCircleOutlined />
<CloseSquareOutlined />
<CheckCircleOutlined />
<CheckSquareOutlined />
<ClockCircleOutlined />
<FormOutlined />
<DashOutlined />
<SmallDashOutlined />
<YoutubeOutlined />
<CodepenCircleOutlined />
<AliyunOutlined />
<PlusOutlined />
<LinkedinOutlined />
<AimOutlined />
<BugOutlined />
<CloudDownloadOutlined />
<CloudServerOutlined />
<CloudSyncOutlined />
<CloudUploadOutlined />
<CommentOutlined />
<ConsoleSqlOutlined />
<EyeInvisibleOutlined />
<FileGifOutlined />
<DeliveredProcedureOutlined />
<FieldTimeOutlined />
<FileZipOutlined />
<FolderViewOutlined />
<FundProjectionScreenOutlined />
<FundViewOutlined />
<MacCommandOutlined />
<PlaySquareOutlined />
<OneToOneOutlined />
<RotateLeftOutlined />
<RotateRightOutlined />
<SaveOutlined />
<SwitcherOutlined />
<TranslationOutlined />
<VerifiedOutlined />
<VideoCameraAddOutlined />
<WhatsAppOutlined />
{/*</Col>*/}
</Row>
);
}
Example #7
| Source File: Color.tsx From yugong with MIT License | 4 votes |
|
Color: React.FC<Props> = ({
defaultColor,
label,
onChange,
children,
span,
...other
}) => {
const [displayColorPicker, setDisplayColorPicker] = useState(false);
const [color, setColor] = useState<RGBColor>();
const [pickWrapStyle, setPickWrapStyle] = useState({});
const picker = useRef(null);
useEffect(() => {
if (defaultColor) {
const optColor: any = {};
const temp = parse(defaultColor);
if (temp.space) {
optColor.r = temp.values[0];
optColor.g = temp.values[1];
optColor.b = temp.values[2];
optColor.a = temp.alpha;
setColor(optColor);
}
} else {
setColor(undefined);
}
}, [defaultColor]);
const handleClick = useCallback(
(e) => {
setDisplayColorPicker(!displayColorPicker);
const style: any = {
position: 'absolute',
};
const width = document.body.offsetWidth,
height = document.body.offsetHeight,
sWidth = 270,
sHeight = 350,
X = e.screenX,
Y = e.screenY;
// 1、判断拾色器的宽度小于窗口宽度
if (width > sWidth) {
if (X + sWidth > width) {
style.position = 'fixed';
style.right = `10px`;
}
}
// 2、判断拾色器的高度大于窗口高度
if (height > sHeight) {
if (Y + sHeight > height) {
style.position = 'fixed';
style.bottom = `10px`;
}
}
setPickWrapStyle(style);
},
[displayColorPicker]
);
const handleClose = useCallback(() => {
setDisplayColorPicker(false);
}, []);
/**
* 高频编辑防抖处理
*/
const refChange = useSafeCallback(onChange);
const onChangeDebounce = useMemo(
() =>
throttle((value) => {
refChange(value);
}, 500),
[refChange]
);
const handleChange = useCallback(
(color: ColorResult | 'inherit') => {
let colorResult: any = color;
if (color === 'inherit') {
colorResult = undefined;
setColor(undefined);
} else {
setColor(color.rgb);
}
onChangeDebounce({
name: 'color',
value: colorResult,
});
},
[onChangeDebounce]
);
const renderColor = () => {
return (
<>
{displayColorPicker ? (
<div className={s.popover}>
<div className={s.cover} onClick={handleClose} />
<div
className={s.wrap}
style={pickWrapStyle}
ref={picker}
onClick={(e) => e.stopPropagation()}
>
<SketchPicker
color={color || undefined}
width="250px"
onChange={handleChange}
className={s.picker}
presetColors={[
'#f44336',
'#e91e63',
'#9c27b0',
'#673ab7',
'#3f51b5',
'#2196f3',
'#03a9f4',
'#00bcd4',
'#009688',
'#4caf50',
'#8bc34a',
'#cddc39',
'#ffeb3b',
'#ffc107',
'#ff9800',
'#ff5722',
'#aaaaaa',
'#000000',
'#fff',
'transparent',
]}
/>
<div
onClick={() => handleChange('inherit')}
className={s.inherit}
>
移除
</div>
</div>
</div>
) : null}
</>
);
};
const displayColor = color && `rgba(${(color as any).r}, ${(color as any).g}, ${
(color as any).b
}, ${(color as any).a})`
return (
<>
{children ? (
<>
<span {...other} onClick={handleClick}>
{children}
</span>
{renderColor()}
</>
) : (
<Row className={s.row} gutter={4}>
<Col className={s.label} span={span?.label || 7}>
{label || ''}
</Col>
<Col span={ span?.value || 17}>
<div className={s.swatch} onClick={handleClick}>
{color ? (
<div
className={s.color}
style={{
backgroundColor: displayColor,
}}
/>
) : (
<div className={ClassNames(s.color, s.empty)}>
<BgColorsOutlined />
</div>
)}
{renderColor()}
</div>
</Col>
</Row>
)}
</>
);
}
Example #8
| Source File: index.tsx From ant-simple-draw with MIT License | 4 votes |
|
BackGround: FC<FormProps<BackfgroundValType>> = memo(function BackGround(props) {
const { value, onChange } = props;
const [val, setVal] = useSetState<BackfgroundValType>({
type: 'gradient',
value: undefined,
});
const [color, setColor] = useSetState<RgbaColor>(defaultColor);
const [visible, setVisible] = useState<boolean>(false);
const { backgroundStyle } = useBackground(val);
const triggerChange = useCallback(
(changedValue: BackfgroundValType) => {
setVal(changedValue);
onChange &&
onChange({
...val,
...value,
...changedValue,
});
},
[color],
);
useEffect(() => {
// 用于回显值的
if (value) {
setVal(value);
// 这样做的目的是付默认值和防止死循环loop
if (value.type === 'solidColor' && color === defaultColor) {
setColor(value.value);
}
}
}, [value]);
return (
<>
<div
className={style.bgContainer}
id="bgContainer"
onClick={(e) => {
setVisible((pre) => !pre);
}}
style={backgroundStyle}
></div>
{visible ? (
<div className={style.modal} id="bgContainerModal">
<Tabs
defaultActiveKey={val.type}
centered
tabBarExtraContent={{
left: (
<CloseOutlined style={{ cursor: 'pointer' }} onClick={() => setVisible(false)} />
),
right: val.value ? (
<Button
type="primary"
danger
size="small"
icon={<BgColorsOutlined />}
onClick={() => [
triggerChange(
Object.assign({}, val, {
value: val.type === 'gradient' ? null : defaultColor,
}),
),
setColor(defaultColor),
]}
>
清除
</Button>
) : null,
}}
onChange={(v) => {
setVal({ type: v as module });
}}
>
<TabPane tab="渐变色" key="gradient">
<ul className={style.gradient}>
{gradientList.map((item, index) => (
<li
style={{ backgroundImage: item }}
key={index}
onClick={() => [triggerChange(Object.assign({}, val, { value: item }))]}
></li>
))}
</ul>
</TabPane>
<TabPane tab="纯色" key="solidColor">
<div className={`custom-pointers ${style.pickColor}`}>
<RgbaColorPicker
color={color}
onChange={(v) => [
setColor(v),
triggerChange(Object.assign({}, val, { value: v })),
]}
/>
<div className={style.pickColorController}>
{Object.keys(color).map((item) => (
<div style={{ textAlign: 'center' }} key={item}>
<InputNumber
style={{ width: '60px' }}
min={0}
max={item === 'a' ? 1 : 255}
value={(color as any)[item]}
onChange={(v) => [
setColor({ [item]: v }),
triggerChange(
Object.assign({}, val, {
value: Object.assign({}, color, { [item]: v }),
}),
),
]}
/>
<p>{item.toLocaleUpperCase()}</p>
</div>
))}
</div>
</div>
</TabPane>
</Tabs>
</div>
) : null}
</>
);
})
Example #9
| Source File: DetailOrder.tsx From mayoor with MIT License | 4 votes |
|
DetailOrder: React.FC = () => {
const routeParams = useParams<{ id: string }>();
const { t } = useTranslation();
const history = useHistory();
const { data } = useQuery<GetOrder, GetOrderVariables>(GET_ORDER, {
variables: { number: Number(routeParams.id) },
});
const orderTitle = t('Order #{{number}} {{customerName}}', {
number: data?.getOrderByNumber?.number,
customerName: data?.getOrderByNumber?.customer?.name,
});
useEffect(() => {
document.title = `${orderTitle} | mayoor`;
}, [data?.getOrderByNumber?.number]);
const initialValues = mapToOrderFormValues(data);
const [updateOrder, { loading }] = useMutation<UpdateOrder, UpdateOrderVariables>(UPDATE_ORDER);
const [deleteOrder, { loading: deleteLoading }] = useMutation<
DeleteOrder,
DeleteOrderVariables
>(DELETE_ORDER);
const submitHandler = async (orderValues: OrderFormValues) => {
const { urgency, status, customerId, totalPrice, totalTax, note } = orderValues;
const id = data?.getOrderByNumber?.id;
if (!id) {
return;
}
try {
await updateOrder({
variables: {
id,
input: {
urgency,
status,
customerId,
totalPrice: totalPrice || 0,
totalTax: totalTax || 0,
note,
items: orderValues.items.map((item) => ({
...item,
totalTax: item.totalTax || 0,
totalPrice: item.totalPrice || 0,
})),
},
},
});
message.success(t('order_updated'));
} catch (err) {
console.error(err);
message.error(t('order_update_fail'));
}
};
const handleOrderDelete = async () => {
const id = data?.getOrderByNumber?.id;
if (!id) {
return;
}
try {
await deleteOrder({ variables: { id } });
message.info(t('order_deleted'));
history.push(`/orders/list`);
} catch (err) {
console.error(err);
message.error(t('order_delete_fail'));
}
};
if (!data || !data.getOrderByNumber) {
return (
<PageTitle>
<Skeleton active />
</PageTitle>
);
}
return (
<>
<Row>
<Col sm={12}>
<PageTitle>{orderTitle}</PageTitle>
</Col>
<Col sm={12}>
<Row justify="end">
<OrderActionsWrapper>
<ButtonGroup>
<Link to={`/orders/${data.getOrderByNumber.number}/print`}>
<Button icon={<BgColorsOutlined />}>{t('Print view')}</Button>
</Link>
<Link to={`/orders/${data.getOrderByNumber.number}/production`}>
<Button icon={<HighlightOutlined />}>
{t('Production view')}
</Button>
</Link>
<Popconfirm
title={t('Are you sure want to remove this order?')}
onConfirm={handleOrderDelete}
placement="topRight"
okText={t('Delete')}
okType="danger"
>
<Button
icon={<DeleteOutlined />}
loading={deleteLoading}
data-test-id="order-delete-button"
>
{t('Delete')}
</Button>
</Popconfirm>
</ButtonGroup>
</OrderActionsWrapper>
</Row>
</Col>
</Row>
<DetailDescription
createdAt={data?.getOrderByNumber?.createdAt}
createdByName={data?.getOrderByNumber?.createdBy.name}
updatedAt={data?.getOrderByNumber?.updatedAt}
></DetailDescription>
{initialValues ? (
<OrderForm
initialValues={initialValues}
onSubmit={submitHandler}
extraCustomer={data?.getOrderByNumber?.customer ?? null}
isNumberEditable={false}
submitButton={
<Button
type="primary"
htmlType="submit"
style={{ marginTop: 10 }}
loading={loading}
data-test-id="save-order-submit-button"
>
{t('Save order')}
</Button>
}
/>
) : (
<CenteredSpinner />
)}
</>
);
}
Example #10
| Source File: ChartDraggableElementField.tsx From datart with Apache License 2.0 | 4 votes |
|
ChartDraggableElementField: FC<{
modalSize;
config;
columnConfig;
ancestors;
aggregation;
availableSourceFunctions;
onConfigChanged;
handleOpenActionModal;
}> = memo(
({
modalSize,
config,
columnConfig,
ancestors,
aggregation,
availableSourceFunctions,
onConfigChanged,
handleOpenActionModal,
}) => {
const renderActionExtensionMenu = (uid: string, type: string, category) => {
return (
<ChartDataConfigSectionActionMenu
uid={uid}
type={type}
category={category}
ancestors={ancestors}
config={config}
modalSize={modalSize}
availableSourceFunctions={availableSourceFunctions}
onConfigChanged={onConfigChanged}
onOpenModal={handleOpenActionModal}
/>
);
};
const enableActionsIcons = col => {
const icons = [] as any;
if (col.alias) {
icons.push(<DiffOutlined key="alias" />);
}
if (col.sort) {
if (col.sort.type === SortActionType.ASC) {
icons.push(<SortAscendingOutlined key="sort" />);
}
if (col.sort.type === SortActionType.DESC) {
icons.push(<SortDescendingOutlined key="sort" />);
}
}
if (col.format) {
icons.push(<FormatPainterOutlined key="format" />);
}
if (col.aggregate) {
icons.push(<GroupOutlined key="aggregate" />);
}
if (col.filter) {
icons.push(<FilterOutlined key="filter" />);
}
if (col.color) {
icons.push(<BgColorsOutlined key="color" />);
}
if (col.size) {
icons.push(<FontSizeOutlined key="size" />);
}
return icons;
};
return (
<Dropdown
key={columnConfig.uid}
disabled={!config?.actions}
destroyPopupOnHide={true}
overlay={renderActionExtensionMenu(
columnConfig.uid!,
columnConfig.type,
columnConfig.category,
)}
overlayClassName="datart-data-section-dropdown"
trigger={['click']}
>
<div>
{config?.actions && <DownOutlined style={{ marginRight: '10px' }} />}
<span>
{aggregation === false
? columnConfig.colName
: getColumnRenderName(columnConfig)}
</span>
<div style={{ display: 'inline-block', marginLeft: '5px' }}>
{enableActionsIcons(columnConfig)}
</div>
</div>
</Dropdown>
);
},
)
