diff --git a/readme.md b/readme.md index d39254f..94ef203 100644 --- a/readme.md +++ b/readme.md @@ -81,3 +81,15 @@ st.write(f'The selected button label is: {btn}') [download_badge]: https://badgen.net/pypi/dm/streamlit-antd-components [download_link]: https://pypi.org/project/streamlit-antd-components/#files + +# Developer mode +In `frontend` folder run +```sh +npm install +npm run build +``` + +Then in source, you can debug the components in the [demo app](https://github.com/nicedouble/StreamlitAntdComponentsDemo). Via +```py +pip install . +``` \ No newline at end of file diff --git a/setup.py b/setup.py index 88844d2..74aeeb3 100644 --- a/setup.py +++ b/setup.py @@ -8,7 +8,12 @@ def readme() -> str: Used for the long_description. It's nice, because now 1) we have a top level README file and 2) it's easier to type in the README file than to put a raw string in below. - :return: content of README.md + + :param color: alert color,support 'success', 'info', 'warning', 'error' and mantine color, hex and rgb color + :param background_color: alert background color,support mantine color, hex and rgb color + :param size: alert size,support mantine size and int in px + :param font: alert font,support mantine font and str + :return: content of README.md """ return open(join(dirname(__file__), "readme.md")).read() diff --git a/streamlit_antd_components/frontend/package.json b/streamlit_antd_components/frontend/package.json index 361f5a6..949dd5b 100644 --- a/streamlit_antd_components/frontend/package.json +++ b/streamlit_antd_components/frontend/package.json @@ -3,11 +3,15 @@ "version": "0.2.0", "private": true, "dependencies": { + "@babel/core": "^7.23.7", + "@emotion/react": "^11.11.3", "@mantine/core": "6.0.19", + "@mantine/hooks": "^6.0.19", "@types/react": "^16.9.0", "@types/react-dom": "^16.9.0", "antd": "^5.7.2", "bootstrap-icons": "^1.10.5", + "npm-watch": "^0.11.0", "react": "^16.13.1", "react-dom": "^16.13.1", "react-fast-marquee": "^1.6.0", @@ -21,7 +25,16 @@ "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test", - "eject": "react-scripts eject" + "eject": "react-scripts eject", + "watch": "npm-watch" + }, + "watch": { + "build": { + "patterns": [ + "src" + ], + "extensions": "js,tsx,css" + } }, "eslintConfig": { "extends": "react-app" diff --git a/streamlit_antd_components/frontend/src/components.tsx b/streamlit_antd_components/frontend/src/components.tsx index 8995029..dc9d07e 100644 --- a/streamlit_antd_components/frontend/src/components.tsx +++ b/streamlit_antd_components/frontend/src/components.tsx @@ -15,6 +15,7 @@ import AntdResult from "./ts/Result"; import {AntdTags} from "./ts/Tag"; import AntdPagination from "./ts/Pagination"; import AntdChip from "./ts/Chip"; +import AntdColorPicker from "./ts/ColorPicker"; //named components const componentsMap: any = { @@ -34,7 +35,8 @@ const componentsMap: any = { 'result': AntdResult, 'tags': AntdTags, 'pagination': AntdPagination, - 'chip': AntdChip + 'chip': AntdChip, + 'color_picker': AntdColorPicker, } export default componentsMap \ No newline at end of file diff --git a/streamlit_antd_components/frontend/src/css/color_picker.css b/streamlit_antd_components/frontend/src/css/color_picker.css new file mode 100644 index 0000000..00c5688 --- /dev/null +++ b/streamlit_antd_components/frontend/src/css/color_picker.css @@ -0,0 +1,7 @@ +.ant-popover-content { + padding: 0 !important; + overflow: unset !important; +} +li.ant-colorpicker-menu-item { + overflow: unset !important; +} \ No newline at end of file diff --git a/streamlit_antd_components/frontend/src/js/tags.react.js b/streamlit_antd_components/frontend/src/js/tags.react.js new file mode 100644 index 0000000..6cd98b1 --- /dev/null +++ b/streamlit_antd_components/frontend/src/js/tags.react.js @@ -0,0 +1,37 @@ +import React from "react"; +import {deepCopy, getSize} from "./utils.react" +import {CustomIcon} from "../ts/utils"; +import {AntdTags} from "../ts/Tag"; + +//recurve str property to react node +const strToNode = (obj, size) => { + return obj.map((item, idx) => { + let obj_copy = deepCopy(item) + obj_copy['key'] = idx + const icon = obj_copy['icon'] + const tag = obj_copy['tag'] + //add tag + if (tag) { + obj_copy.label =
+
{obj_copy.label}
+ +
+ } + //add icon + if (icon) { + obj_copy.label =
+ +
{obj_copy.label} +
+
+ } + return obj_copy + }) +} + +export {strToNode} \ No newline at end of file diff --git a/streamlit_antd_components/frontend/src/js/utils.react.js b/streamlit_antd_components/frontend/src/js/utils.react.js index decca38..9555056 100644 --- a/streamlit_antd_components/frontend/src/js/utils.react.js +++ b/streamlit_antd_components/frontend/src/js/utils.react.js @@ -41,6 +41,23 @@ const getSize = (size, base = MartineFontSize) => { } +const getTheme = (props) => { + const color = props['color'] + const font = props['font'] != null ? props['font'] : 'inherit' + const backgroundColor = props['background_color'] != null ? props['background_color'] : 'transparent' + const size = getSize(props['size'] != null ? props['size'] : 'md') + const primaryColor = GetColor(color == null ? '--primary-color' : color) + const textColor = GetColor('--text-color') + const theme = { + colorPrimary: color, + colorText: textColor, + fontSize: size, + fontFamily: font, + colorBgContainer: backgroundColor, + } + return {color, font, backgroundColor, size, primaryColor, textColor, theme} +} + const GetColor = (color) => { const theme = useMantineTheme() if (color.indexOf('--') === 0) { @@ -53,6 +70,8 @@ const GetColor = (color) => { } } } + + const RgbaColor = (color, alpha = 0.2) => { const theme = useMantineTheme() return theme.fn.rgba(color, alpha) @@ -249,5 +268,6 @@ export { insertStyle, MartineFontSize, MartineRadiusSize, - GetColor, RgbaColor, DarkenColor,LightenColor, getSize, getFlexDirection + GetColor, RgbaColor, DarkenColor, LightenColor, getFlexDirection, + getTheme, getSize }; \ No newline at end of file diff --git a/streamlit_antd_components/frontend/src/ts/Alert.tsx b/streamlit_antd_components/frontend/src/ts/Alert.tsx index 594cfd9..cb8a7e0 100644 --- a/streamlit_antd_components/frontend/src/ts/Alert.tsx +++ b/streamlit_antd_components/frontend/src/ts/Alert.tsx @@ -1,15 +1,13 @@ import {Streamlit} from "streamlit-component-lib"; import React, {useEffect} from "react"; import {Alert, ConfigProvider} from 'antd'; -import {GetColor, getSize, insertStyle, MartineRadiusSize, RgbaColor, markdown} from "../js/utils.react"; +import {GetColor, getSize, getTheme, insertStyle, markdown, MartineRadiusSize, RgbaColor} from "../js/utils.react"; import Marquee from "react-fast-marquee"; -import {CustomIcon} from "./utils"; +import {BaseProp, CustomIcon} from "./utils"; -interface AlertProp { +interface AlertProp extends BaseProp { label: string; description: string; - size: any - color: any radius: any variant: any icon: any @@ -21,13 +19,13 @@ const AntdAlert = (props: AlertProp) => { //get data const message = props['label'] const description = props['description'] - const size = props['size'] - const color = props['color'] const radius = props['radius'] const variant = props['variant'] const icon = props['icon'] const closable = props['closable'] const banner = props['banner'] + const {color, font, backgroundColor, size, primaryColor, textColor, theme} = getTheme(props); + const colorList: any = { 'info': {'primary': 'rgb(0, 66, 128)', 'lighten': 'rgba(28, 131, 225, 0.1)'}, 'success': {'primary': 'rgb(23, 114, 51)', 'lighten': 'rgba(33, 195, 84, 0.1)'}, @@ -116,7 +114,7 @@ const AntdAlert = (props: AlertProp) => { theme={{ components: { Alert: { - fontSize: getSize(size), + ...theme }, }, }} diff --git a/streamlit_antd_components/frontend/src/ts/Buttons.tsx b/streamlit_antd_components/frontend/src/ts/Buttons.tsx index b1bc1b3..6e68b20 100644 --- a/streamlit_antd_components/frontend/src/ts/Buttons.tsx +++ b/streamlit_antd_components/frontend/src/ts/Buttons.tsx @@ -1,20 +1,19 @@ import {Streamlit} from "streamlit-component-lib"; import React, {useEffect, useRef, useState} from "react"; -import {Button, Space, ConfigProvider} from 'antd'; -import {getHrefKeys, insertStyle, GetColor, RgbaColor, MartineRadiusSize, getSize} from "../js/utils.react" -import {CustomIcon, LabelWrap} from "./utils"; +import {Button, ConfigProvider, Space} from 'antd'; +import {getHrefKeys, getSize, getTheme, insertStyle, MartineRadiusSize, RgbaColor} from "../js/utils.react" +import {BaseProp, CustomIcon, LabelWrap} from "./utils"; import "../css/buttons.css" -interface ButtonsProp { +interface ButtonsProp extends BaseProp { label: any; description: any; items: any[]; index: number | null; variant: string; align: any; - size: any radius: any - color: any + background_color: any; direction: "horizontal" | "vertical" | undefined; gap: any; use_container_width: boolean; @@ -23,40 +22,41 @@ interface ButtonsProp { stValue: any } -interface ButtonProp { +interface ButtonProp extends BaseProp { label: any; icon: any; disabled: any; href: any; - color: any; } -const AntdButton = (idx: any, type_: any, size: any, color: any, radius: any, props: ButtonProp, onClick: any, isSelect: boolean, grow: boolean) => { - const textColor = GetColor('--text-color') - const primary_color = GetColor(props['color'] != null ? props['color'] : color != null ? color : '--primary-color') - const text_color = props['color'] != null ? props['color'] : textColor + +const AntdButton = (idx: any, type_: any, radius: any, props: ButtonProp, onClick: any, isSelect: boolean, grow: boolean) => { + //get data + const {color, font, backgroundColor, size, primaryColor, textColor, theme} = getTheme(props); + const linkColor = props['color'] != null ? props['color'] : '#1677ff' + let selectStyle = ` #btn-${idx}.ant-btn-default:not(:disabled):active,#btn-${idx}.ant-btn-dashed:not(:disabled):active { color: #fff !important; - border-color: ${primary_color} !important; - background: ${primary_color} !important; + border-color: ${primaryColor} !important; + background: ${primaryColor} !important; } #btn-${idx}.ant-btn-primary:not(:disabled):active { - color: ${primary_color} !important; + color: ${primaryColor} !important; background: transparent !important; - border-color: ${primary_color} !important; + border-color: ${primaryColor} !important; } ` let unSelectStyle = ` #btn-${idx}.ant-btn-primary:not(:disabled):hover{ - box-shadow: 0 0 3px ${primary_color}, 0 0 3px rgba(0, 0, 0, .05); + box-shadow: 0 0 3px ${primaryColor}, 0 0 3px rgba(0, 0, 0, .05); } #btn-${idx}.ant-btn-text:not(:disabled):hover{ - color:${text_color}; + color:${textColor}; } #btn-${idx}.ant-btn-text{ - color:${text_color}; + color:${textColor}; } #btn-${idx}.ant-btn-text:disabled{ color:${RgbaColor(textColor, 0.5)}; @@ -70,22 +70,19 @@ const AntdButton = (idx: any, type_: any, size: any, color: any, radius: any, pr theme={{ components: { Button: { - colorText: isSelect ? textColor : primary_color, + ...theme, + colorText: isSelect ? textColor : primaryColor, colorTextDisabled: RgbaColor(textColor, 0.5), - colorPrimary: primary_color, colorBgContainerDisabled: 'transform', - colorBgContainer: 'transform', - colorPrimaryHover: primary_color, - colorPrimaryActive: primary_color, + colorPrimaryHover: primaryColor, + colorPrimaryActive: primaryColor, colorBgTextHover: RgbaColor(textColor, 0.1), colorLink: linkColor, colorLinkHover: linkColor, colorLinkActive: linkColor, // controlHeight: 3 * getSize(size) - 10, - fontSize: getSize(size), - colorBorder: isSelect ? RgbaColor(textColor) : primary_color, + colorBorder: isSelect ? RgbaColor(textColor) : primaryColor, borderRadius: getSize(radius, MartineRadiusSize), - fontFamily: 'var(--font)' }, }, }} @@ -108,6 +105,8 @@ const AntdButton = (idx: any, type_: any, size: any, color: any, radius: any, pr const AntdButtons = (props: ButtonsProp) => { //get data + const {color, font, backgroundColor, size, primaryColor, textColor, theme} = getTheme(props); + const label = props['label'] const description = props['description'] const items = props['items'] @@ -115,15 +114,12 @@ const AntdButtons = (props: ButtonsProp) => { let variant = props['variant'] variant = variant === 'outline' ? 'default' : variant === 'filled' ? 'primary' : variant const align = props['align'] - const size = props['size'] const radius = props['radius'] - const color = props['color'] const direction = props['direction'] const gap = props['gap'] const grow = props['use_container_width'] const return_index = props['return_index'] const kv = props['kv'] - const textColor = GetColor('--text-color') //load custom style let style = ` @@ -188,7 +184,11 @@ const AntdButtons = (props: ButtonsProp) => { const buttonGroup = items.map((item: any, idx) => { let otherType = ['primary', 'default'].find((x) => x !== variant) let type_: any = index != null ? selected === idx ? otherType : variant : variant - return AntdButton(idx, type_, size, color, radius, item, onClick, index != null, grow) + item.color = item.color != null ? item.color : color + item.background_color = item.background_color != null ? item.background_color : backgroundColor + item.size = item.size != null ? item.size : size + item.font = item.font != null ? item.font : font + return AntdButton(idx, type_, radius, item, onClick, index != null, grow) } ) diff --git a/streamlit_antd_components/frontend/src/ts/Cascader.tsx b/streamlit_antd_components/frontend/src/ts/Cascader.tsx index ff95cf0..e0d5180 100644 --- a/streamlit_antd_components/frontend/src/ts/Cascader.tsx +++ b/streamlit_antd_components/frontend/src/ts/Cascader.tsx @@ -4,11 +4,11 @@ import {Cascader, ConfigProvider} from 'antd'; import {CaretDownFilled, CaretRightFilled} from '@ant-design/icons'; import type {DefaultOptionType} from 'antd/es/cascader'; import {strToNode} from "../js/cascader.react"; -import {reindex, GetColor, RgbaColor, insertStyle} from "../js/utils.react" +import {getTheme, insertStyle, reindex, RgbaColor} from "../js/utils.react" import '../css/cascader.css' -import {LabelWrap} from "./utils"; +import {BaseProp, LabelWrap} from "./utils"; -interface CascaderProp { +interface CascaderProp extends BaseProp { label: any description: any items: any[] @@ -16,7 +16,6 @@ interface CascaderProp { placeholder: any disabled: boolean clear: boolean - color: any search: boolean multiple: boolean strict: boolean @@ -26,6 +25,8 @@ interface CascaderProp { const AntdCascader = (props: CascaderProp) => { //get data + const {color, font, backgroundColor, size, primaryColor, textColor, theme} = getTheme(props); + const label = props['label'] const description = props['description'] const items = strToNode(props.items) @@ -34,13 +35,17 @@ const AntdCascader = (props: CascaderProp) => { const multiple = props['multiple'] const disabled = props['disabled'] const search = props['search'] - const color = props['color'] const allowClear = props['clear'] const strict = props['strict'] const return_index = props['return_index'] const kv = props['kv'] - const primaryColor = GetColor(color == null ? '--primary-color' : color) - const textColor = GetColor('--text-color') + + // const color = props['color'] + // const font = getFont(props) + // const background_color = getBackgroundColor(props) + // const size = getSize(props) + // const primaryColor = GetColor(color == null ? '--primary-color' : color) + // const textColor = GetColor('--text-color') // load css let borderStyle = ` @@ -120,15 +125,17 @@ const AntdCascader = (props: CascaderProp) => { theme={{ components: { Cascader: { + ...theme, colorBgContainer: 'var(--background-color)', controlItemBgHover: 'var(--secondary-background-color)', controlItemBgActive: RgbaColor(primaryColor), - colorPrimary: primaryColor, colorPrimaryHover: primaryColor, colorTextDisabled: RgbaColor(textColor, 0.5), colorBorder: RgbaColor(textColor, 0.3), + }, Select: { + ...theme, colorBgContainer: 'var(--secondary-background-color)', colorBgElevated: 'var(--background-color)', colorBorder: 'var(--background-color) !important', @@ -140,9 +147,8 @@ const AntdCascader = (props: CascaderProp) => { controlHeight: 40, controlOutlineWidth: 0, lineHeight: 1.6, - fontFamily: 'var(--font)', borderRadius: 8, - colorBgContainerDisabled:'var(--secondary-background-color)', + colorBgContainerDisabled: 'var(--secondary-background-color)', }, }, }} diff --git a/streamlit_antd_components/frontend/src/ts/Checkbox.tsx b/streamlit_antd_components/frontend/src/ts/Checkbox.tsx index aa3815d..9645028 100644 --- a/streamlit_antd_components/frontend/src/ts/Checkbox.tsx +++ b/streamlit_antd_components/frontend/src/ts/Checkbox.tsx @@ -3,18 +3,16 @@ import React, {useEffect, useRef, useState} from "react"; import {Checkbox, ConfigProvider} from 'antd'; import type {CheckboxValueType} from "antd/es/checkbox/Group"; import type {CheckboxChangeEvent} from 'antd/es/checkbox'; -import {GetColor, getSize, insertStyle, MartineRadiusSize, RgbaColor} from "../js/utils.react" -import {LabelWrap} from "./utils"; +import {getSize, getTheme, insertStyle, MartineRadiusSize, RgbaColor} from "../js/utils.react" +import {BaseProp, LabelWrap} from "./utils"; -interface CheckboxProp { +interface CheckboxProp extends BaseProp { label: any description: any items: any[] index: any check_all: boolean | string radius: any - size: any - color: any align: string disabled: boolean return_index: boolean; @@ -30,16 +28,14 @@ const AntdCheckbox = (props: CheckboxProp) => { const label = props['label'] const description = props['description'] const radius = props['radius'] - const size = props['size'] - const color = props['color'] const align = props['align'] const disabled = props['disabled'] const return_index = props['return_index'] const kv = props['kv'] const allIndex = disabled ? [] : items.filter(item => !item.disabled).map(item => item.value) - const primaryColor = GetColor(color == null ? '--primary-color' : color) - const textColor = GetColor('--text-color') - const bgColor = GetColor('--background-color') + + const {color, font, backgroundColor, size, primaryColor, textColor, theme} = getTheme(props); + // component height useEffect(() => Streamlit.setFrameHeight()) @@ -130,14 +126,12 @@ const AntdCheckbox = (props: CheckboxProp) => { theme={{ components: { Checkbox: { + ...theme, colorText: '--text-color', - colorPrimary: primaryColor, colorPrimaryHover: 'transform', - colorBgContainer: bgColor, colorTextDisabled: RgbaColor(textColor, 0.5), colorBgContainerDisabled: RgbaColor(textColor), colorBorder: RgbaColor(textColor, 0.3), - fontSize: getSize(size), controlInteractiveSize: 2 * getSize(size) - 10, }, }, diff --git a/streamlit_antd_components/frontend/src/ts/Chip.tsx b/streamlit_antd_components/frontend/src/ts/Chip.tsx index d92d78e..9867d1c 100644 --- a/streamlit_antd_components/frontend/src/ts/Chip.tsx +++ b/streamlit_antd_components/frontend/src/ts/Chip.tsx @@ -1,11 +1,11 @@ import {Streamlit} from "streamlit-component-lib"; import React, {useEffect, useRef, useState} from "react"; import {Chip, Group, Stack} from "@mantine/core"; -import {reindex, GetColor, RgbaColor, DarkenColor, getSize} from "../js/utils.react" +import {DarkenColor, GetColor, getSize, getTheme, reindex, RgbaColor} from "../js/utils.react" import strToNode from "../js/chip.react"; -import {LabelWrap} from "./utils"; +import {BaseProp, LabelWrap} from "./utils"; -interface ChipProp { +interface ChipProp extends BaseProp { label: any description: any items: any[] @@ -13,8 +13,6 @@ interface ChipProp { align: string direction: string radius: any - size: any - color: any variant: string multiple: boolean return_index: boolean; @@ -31,16 +29,14 @@ const AntdChip = (props: ChipProp) => { const align = props['align'] const direction = props['direction'] const radius = props['radius'] - const size = props['size'] - const color = props['color'] const variant = props['variant'] const multiple = props['multiple'] const return_index = props['return_index'] const kv = props['kv'] - const primaryColor = GetColor(color == null ? '--primary-color' : color) - const textColor = GetColor('--text-color') const secondaryBgColor = GetColor('--secondary-background-color') + const {color, font, backgroundColor, size, primaryColor, textColor, theme} = getTheme(props); + // component height useEffect(() => Streamlit.setFrameHeight()) @@ -109,7 +105,7 @@ const AntdChip = (props: ChipProp) => { disabled={item.disabled} styles={(theme) => ({ label: { - height: getSize(size)+16, + height: getSize(size) + 16, marginBottom: 0, color: textColor, borderColor: diff --git a/streamlit_antd_components/frontend/src/ts/ColorPicker.tsx b/streamlit_antd_components/frontend/src/ts/ColorPicker.tsx new file mode 100644 index 0000000..30521ee --- /dev/null +++ b/streamlit_antd_components/frontend/src/ts/ColorPicker.tsx @@ -0,0 +1,62 @@ +import {Streamlit} from "streamlit-component-lib"; +import React, {useEffect, useState} from "react"; +import {ColorPicker, ConfigProvider} from 'antd'; +import {getTheme} from "../js/utils.react" +import {BaseProp, LabelWrap} from "./utils"; +import {Color} from "antd/es/color-picker"; +import '../css/color_picker.css' + + +interface ColorPickerProp extends BaseProp { + label: any + description: any +} + +const AntdColorPicker = (props: ColorPickerProp) => { + //get data + const {backgroundColor, size, primaryColor, textColor, theme} = getTheme(props); + const label = props['label'] + const description = props['description'] + let labelHeight = label !== null ? 64 : 32 + //state + const [height, setHeight] = useState(labelHeight) + const [color, setColor] = useState(props.color); + + // component height + useEffect(() => Streamlit.setFrameHeight(height)) + + //callback + const onChange = (value: Color, hex: string) => { + setColor(value) + Streamlit.setComponentValue(hex) + } + + const openChange = (open: boolean) => { + let labelHeight = label !== null ? 64 : 32 + setHeight(open ? 270 + labelHeight : labelHeight) + } + + return ( + + }/>) +}; + +export default AntdColorPicker diff --git a/streamlit_antd_components/frontend/src/ts/Divider.tsx b/streamlit_antd_components/frontend/src/ts/Divider.tsx index 52f9b9f..1bd0b0f 100644 --- a/streamlit_antd_components/frontend/src/ts/Divider.tsx +++ b/streamlit_antd_components/frontend/src/ts/Divider.tsx @@ -1,15 +1,14 @@ import {Streamlit} from "streamlit-component-lib"; import React, {useEffect} from "react"; import {Divider} from '@mantine/core'; -import {RgbaColor, GetColor, markdown} from "../js/utils.react" -import {CustomIcon} from "./utils"; +import {getTheme, markdown, RgbaColor} from "../js/utils.react" +import {BaseProp, CustomIcon} from "./utils"; +import {ConfigProvider} from "antd"; -interface DividerProp { +interface DividerProp extends BaseProp { label: any - color: any icon: any align: any - size: any variant: any } @@ -17,27 +16,36 @@ const AntdDivider = (props: DividerProp) => { //get data const label = props['label']; const icon = props['icon']; - const color = props['color']; // @ts-ignore const align = {'start': 'left', 'center': 'center', 'end': 'right'}[props['align']] - const size = props['size']; const variant = props['variant']; - const textColor = GetColor('--text-color') + const {color, font, backgroundColor, size, primaryColor, textColor, theme} = getTheme(props); // component height useEffect(() => Streamlit.setFrameHeight()) return ( - + + {markdown(label)} : markdown(label)} - labelPosition={align} - size={size} - variant={variant} - /> + labelPosition={align} + size={size} + variant={variant} + /> + + ); }; diff --git a/streamlit_antd_components/frontend/src/ts/Menu.tsx b/streamlit_antd_components/frontend/src/ts/Menu.tsx index e3f88e8..8d25b44 100644 --- a/streamlit_antd_components/frontend/src/ts/Menu.tsx +++ b/streamlit_antd_components/frontend/src/ts/Menu.tsx @@ -4,18 +4,24 @@ import type {MenuProps} from 'antd'; import {ConfigProvider, Menu} from 'antd'; import {strToNode} from "../js/menu.react"; import { - getCollapseKeys, getHrefKeys, getParentKeys, reindex, - insertStyle, GetColor, RgbaColor, getSize + getCollapseKeys, + GetColor, + getHrefKeys, + getParentKeys, + getSize, + getTheme, + insertStyle, + reindex, + RgbaColor } from "../js/utils.react" import '../css/menu.css' +import {BaseProp} from "./utils"; -interface MenuProp { +interface MenuProp extends BaseProp { items: any[]; index: any; open_index: any; open_all: boolean; - size: any - color: any variant: any indent: any; height: any; @@ -26,24 +32,24 @@ interface MenuProp { const AntdMenu = (props: MenuProp) => { - const textColor = GetColor('--text-color') //get data + const {color, font, backgroundColor, size, primaryColor, textColor, theme} = getTheme(props); + const items = strToNode(props.items, props.size, props.variant, RgbaColor(textColor, 0.5)) const dsk = reindex(props.index) const openIndex = reindex(props.open_index) const openAll = props['open_all'] - const size = props['size'] - const color = props['color'] const variant = props['variant'] const indent = props['indent'] const height = props['height'] const return_index = props['return_index'] const kv = props['kv'] const dok = openAll ? getCollapseKeys(items) : openIndex ? openIndex : dsk && getParentKeys(dsk, items) - const primaryColor = GetColor(color == null ? '--primary-color' : color) + const primaryLightColor = RgbaColor(primaryColor) const bgColor = GetColor('--background-color') + //custom style const textStyle = ` li.ant-menu-item.ant-menu-item-selected .menu-desc{ @@ -126,6 +132,7 @@ const AntdMenu = (props: MenuProp) => { theme={{ components: { Menu: { + ...theme, itemBorderRadius: variant === 'left-bar' || variant === 'right-bar' ? 0 : 8, itemColor: 'var(--text-color)', groupTitleColor: RgbaColor(textColor, 0.5), @@ -138,8 +145,6 @@ const AntdMenu = (props: MenuProp) => { subMenuItemBg: bgColor, itemBg: bgColor, colorSplit: RgbaColor(textColor), - fontFamily: 'var(--font)', - fontSize: getSize(size), itemHeight: getSize(size) + 5, }, }, diff --git a/streamlit_antd_components/frontend/src/ts/Pagination.tsx b/streamlit_antd_components/frontend/src/ts/Pagination.tsx index 856c51a..641273d 100644 --- a/streamlit_antd_components/frontend/src/ts/Pagination.tsx +++ b/streamlit_antd_components/frontend/src/ts/Pagination.tsx @@ -1,19 +1,18 @@ import {Streamlit} from "streamlit-component-lib"; import React, {useEffect, useRef, useState} from "react"; -import {Pagination, ConfigProvider} from 'antd'; import type {PaginationProps} from 'antd'; -import {GetColor, insertStyle, RgbaColor, MartineRadiusSize, getSize} from "../js/utils.react" +import {ConfigProvider, Pagination} from 'antd'; +import {getSize, getTheme, insertStyle, MartineRadiusSize, RgbaColor} from "../js/utils.react" import '../css/pagination.css' +import {BaseProp} from "./utils"; -interface PaginationProp { +interface PaginationProp extends BaseProp { total: any index: any page_size: any jump: any align: string circle: string - color: any - size: any radius: any variant: any previous: any @@ -26,13 +25,13 @@ interface PaginationProp { const AntdPagination = (props: PaginationProp) => { //get data + const {color, font, backgroundColor, size, primaryColor, textColor, theme} = getTheme(props); + const total = props['total']; const index = props['index']; const page_size = props['page_size']; const jump = props['jump']; const align = props['align']; - const color = props['color']; - const size = props['size']; const radius = props['radius']; const variant = props['variant']; const previous = props['previous']; @@ -40,9 +39,7 @@ const AntdPagination = (props: PaginationProp) => { const simple = props['simple']; const disabled = props['disabled']; const show_total = props['show_total']; - const primaryColor = GetColor(color == null ? '--primary-color' : color) const primaryLightColor = RgbaColor(primaryColor) - const textColor = GetColor('--text-color') const [current, setCurrent] = useState(index); @@ -118,17 +115,14 @@ const AntdPagination = (props: PaginationProp) => { theme={{ components: { Pagination: { + ...theme, itemActiveBg: variant === 'outline' ? 'transform' : variant === 'light' ? primaryLightColor : primaryColor, - colorBgContainer: 'inherit', - colorPrimary: primaryColor, colorPrimaryHover: primaryColor, - colorText: 'var(--text-color)', colorBgTextHover: RgbaColor(textColor), colorBgTextActive: RgbaColor(textColor, 0.25), borderRadius: getSize(radius, MartineRadiusSize), controlOutlineWidth: 0, colorBorder: RgbaColor(textColor, 0.3), - fontSize: getSize(size), itemSize: 3 * getSize(size) - 16, controlHeight: 3 * getSize(size) - 18, colorTextDisabled: RgbaColor(textColor), diff --git a/streamlit_antd_components/frontend/src/ts/Rate.tsx b/streamlit_antd_components/frontend/src/ts/Rate.tsx index e8854ed..b3fab4a 100644 --- a/streamlit_antd_components/frontend/src/ts/Rate.tsx +++ b/streamlit_antd_components/frontend/src/ts/Rate.tsx @@ -1,11 +1,11 @@ import {Streamlit} from "streamlit-component-lib"; import React, {useEffect} from "react"; -import {Rate, ConfigProvider} from 'antd'; -import {parseIcon, GetColor, RgbaColor} from "../js/utils.react" +import {ConfigProvider, Rate} from 'antd'; +import {getTheme, parseIcon, RgbaColor} from "../js/utils.react" import {StarFilled} from '@ant-design/icons'; -import {LabelWrap} from "./utils"; +import {BaseProp, LabelWrap} from "./utils"; -interface RateProp { +interface RateProp extends BaseProp { label: any description: any value: any @@ -13,13 +13,13 @@ interface RateProp { symbol: any align: string half: boolean - size: any - color: any stValue: any } const AntdRate = (props: RateProp) => { //get data + const {color, font, backgroundColor, size, primaryColor, textColor, theme} = getTheme(props); + const label = props['label']; const description = props['description']; const value = props['value']; @@ -27,10 +27,6 @@ const AntdRate = (props: RateProp) => { const symbol = parseIcon(props['symbol']); const align = props['align']; const half = props['half']; - const size = props['size']; - const color = props['color']; - const primaryColor = GetColor(color == null ? '--primary-color' : color) - const textColor = GetColor('--text-color') const sizeMap: any = {'xs': 12, 'sm': 16, 'md': 20, 'lg': 30, 'xl': 50} // component height @@ -46,6 +42,7 @@ const AntdRate = (props: RateProp) => { theme={{ components: { Rate: { + ...theme, colorFillContent: RgbaColor(textColor, 0.2), }, }, @@ -63,7 +60,7 @@ const AntdRate = (props: RateProp) => { character={symbol !== null ? symbol : } allowHalf={half} style={{fontSize: typeof (size) == 'string' ? sizeMap[size] : size, color: primaryColor}} - onChange={onChange} + onChange={onChange} /> } /> diff --git a/streamlit_antd_components/frontend/src/ts/Result.tsx b/streamlit_antd_components/frontend/src/ts/Result.tsx index cd4d169..bdd7612 100644 --- a/streamlit_antd_components/frontend/src/ts/Result.tsx +++ b/streamlit_antd_components/frontend/src/ts/Result.tsx @@ -1,7 +1,7 @@ import {Streamlit} from "streamlit-component-lib"; import React, {useEffect} from "react"; -import {Result, Empty, Space, ConfigProvider} from 'antd'; -import {RgbaColor, markdown, GetColor} from "../js/utils.react"; +import {ConfigProvider, Empty, Result, Space} from 'antd'; +import {GetColor, markdown, RgbaColor} from "../js/utils.react"; import {CustomIcon} from "./utils"; interface ResultProp { diff --git a/streamlit_antd_components/frontend/src/ts/Segmented.tsx b/streamlit_antd_components/frontend/src/ts/Segmented.tsx index b4a7c32..09e3d56 100644 --- a/streamlit_antd_components/frontend/src/ts/Segmented.tsx +++ b/streamlit_antd_components/frontend/src/ts/Segmented.tsx @@ -2,19 +2,16 @@ import {Streamlit} from "streamlit-component-lib"; import React, {useEffect, useRef, useState} from "react"; import {SegmentedControl} from '@mantine/core'; import {strToNode} from "../js/segmented.react"; -import {GetColor} from "../js/utils.react" +import {getTheme} from "../js/utils.react" import "../css/segmented.css" -import {LabelWrap} from "./utils"; +import {BaseProp, LabelWrap} from "./utils"; -interface SegmentedProp { +interface SegmentedProp extends BaseProp { items: any[]; index: number; label: string; description: string; radius: any; - size: any; - color: string; - bg_color: string; align: any; direction: any; disabled: boolean; @@ -29,14 +26,13 @@ interface SegmentedProp { const AntdSegmented = (props: SegmentedProp) => { //get data + const {color, font, backgroundColor, size, primaryColor, textColor, theme} = getTheme(props); + const items = strToNode(props['items']) const index = String(props['index']) const label = props['label'] const description = props['description'] const radius = props['radius'] - const size = props['size'] - const color = props['color'] - const bg_color = props['bg_color'] const align = props['align'] const direction = props['direction'] const disabled = props['disabled'] @@ -45,7 +41,7 @@ const AntdSegmented = (props: SegmentedProp) => { const readonly = props['readonly'] const return_index = props['return_index'] const kv = props['kv'] - const primaryColor = GetColor(color == null ? '--primary-color' : color) + // component height useEffect(() => Streamlit.setFrameHeight()) @@ -98,8 +94,8 @@ const AntdSegmented = (props: SegmentedProp) => { className={'d-flex flex-wrap'} styles={(theme) => ({ root: { - backgroundColor: bg_color == null ? 'var(--secondary-background-color)' : - Object.keys(theme.colors).indexOf(bg_color) !== -1 ? theme.colors[bg_color][1] : bg_color, + backgroundColor: backgroundColor == null ? 'var(--secondary-background-color)' : + Object.keys(theme.colors).indexOf(backgroundColor) !== -1 ? theme.colors[backgroundColor][1] : backgroundColor, }, label: { fontSize: typeof (size) == 'number' ? size : undefined, diff --git a/streamlit_antd_components/frontend/src/ts/Steps.tsx b/streamlit_antd_components/frontend/src/ts/Steps.tsx index e34c591..7faa5d4 100644 --- a/streamlit_antd_components/frontend/src/ts/Steps.tsx +++ b/streamlit_antd_components/frontend/src/ts/Steps.tsx @@ -1,15 +1,14 @@ import {Streamlit} from "streamlit-component-lib"; import React, {useEffect, useRef, useState} from "react"; -import {Steps, ConfigProvider} from 'antd'; -import {GetColor, insertStyle, RgbaColor, getSize} from "../js/utils.react"; +import {ConfigProvider, Steps} from 'antd'; +import {getSize, getTheme, insertStyle, RgbaColor} from "../js/utils.react"; import {strToNode} from "../js/steps.react"; import "../css/steps.css" +import {BaseProp} from "./utils"; -interface StepsProp { +interface StepsProp extends BaseProp { items: any[]; index: number; - size: any - color: any placement: any; direction: any; variant: any; @@ -21,19 +20,19 @@ interface StepsProp { const AntdSteps = (props: StepsProp) => { //get data + const {color, font, backgroundColor, size, primaryColor, textColor, theme} = getTheme(props); + const items = strToNode(props['items']) const index = props['index'] - const size = props['size'] - const color = props['color'] const placement = props['placement'] const direction = props['direction'] const variant = props['variant'] const dot = props['dot'] const return_index = props['return_index'] const kv = props['kv'] - const primaryColor = GetColor(color == null ? '--primary-color' : color) + const primaryLightColor = RgbaColor(primaryColor) - const textColor = GetColor('--text-color') + const [current, setCurrent] = useState(index) @@ -47,7 +46,7 @@ const AntdSteps = (props: StepsProp) => { font-size:${getSize(size)}px !important } .ant-steps-item-custom .ant-steps-item-icon .ant-steps-icon{ - color:${RgbaColor(textColor,0.5)} !important + color:${RgbaColor(textColor, 0.5)} !important } ` insertStyle(`sac.steps.style`, textStyle) @@ -81,13 +80,12 @@ const AntdSteps = (props: StepsProp) => { theme={{ components: { Steps: { + ...theme, colorTextLabel: RgbaColor(textColor, 0.5), colorFillContent: RgbaColor(textColor, 0.1), colorSplit: RgbaColor(textColor, 0.5), navArrowColor: RgbaColor(textColor, 0.5), colorTextDescription: RgbaColor(textColor, 0.5), - colorPrimary: primaryColor, - colorText: 'var(--text-color)', controlItemBgActive: primaryLightColor, customIconFontSize: getSize(size) + 14, iconFontSize: getSize(size) - 2, @@ -95,8 +93,8 @@ const AntdSteps = (props: StepsProp) => { fontSize: getSize(size) - 2, dotSize: getSize(size) - 8, dotCurrentSize: getSize(size) - 6, - iconTop:0, - colorIconHover:'red' + iconTop: 0, + colorIconHover: 'red' }, }, }} diff --git a/streamlit_antd_components/frontend/src/ts/Switch.tsx b/streamlit_antd_components/frontend/src/ts/Switch.tsx index 79635a1..2b906ab 100644 --- a/streamlit_antd_components/frontend/src/ts/Switch.tsx +++ b/streamlit_antd_components/frontend/src/ts/Switch.tsx @@ -1,9 +1,10 @@ import {Streamlit} from "streamlit-component-lib"; import React, {useEffect, useRef, useState} from "react"; import {Switch} from '@mantine/core'; -import {parseIcon, GetColor, RgbaColor, getSize, markdown} from "../js/utils.react" +import {GetColor, getSize, getTheme, markdown, parseIcon, RgbaColor} from "../js/utils.react" +import {BaseProp} from "./utils"; -interface SwitchProp { +interface SwitchProp extends BaseProp { label: any; value: any; description: any; @@ -22,6 +23,8 @@ interface SwitchProp { const AntdSwitch = (props: SwitchProp) => { //get data + const {color, font, backgroundColor, size, primaryColor, textColor, theme} = getTheme(props); + const label = props['label'] const value = props['value'] const description = props['description'] @@ -29,14 +32,11 @@ const AntdSwitch = (props: SwitchProp) => { const offLabel = parseIcon(props['off_label']) const align = props['align'] const position = props['position'] - const size = props['size'] const onColor = props['on_color'] const offColor = props['off_color'] const radius = props['radius'] const disabled = props['disabled'] const key = props['key'] - const primaryColor = GetColor(onColor == null ? '--primary-color' : onColor) - const textColor = GetColor('--text-color') const secondaryBgColor = GetColor(offColor == null ? RgbaColor(textColor) : offColor) const [checked, setChecked] = useState(value) diff --git a/streamlit_antd_components/frontend/src/ts/Tabs.tsx b/streamlit_antd_components/frontend/src/ts/Tabs.tsx index 38b18ab..f7524ae 100644 --- a/streamlit_antd_components/frontend/src/ts/Tabs.tsx +++ b/streamlit_antd_components/frontend/src/ts/Tabs.tsx @@ -1,11 +1,12 @@ import {Streamlit} from "streamlit-component-lib"; import React, {useEffect, useRef, useState} from "react"; -import {Tabs, ConfigProvider} from 'antd'; +import {ConfigProvider, Tabs} from 'antd'; import {strToNode} from "../js/tabs.react"; -import {GetColor, RgbaColor, insertStyle, getSize} from "../js/utils.react" +import {getSize, getTheme, insertStyle, RgbaColor} from "../js/utils.react" import '../css/tabs.css' +import {BaseProp} from "./utils"; -interface TabsProp { +interface TabsProp extends BaseProp { items: any[]; index: string; align: string; @@ -13,8 +14,6 @@ interface TabsProp { variant: any; height: number | null; use_container_width: boolean; - size: any - color: any; return_index: boolean; kv: any; stValue: any @@ -22,21 +21,18 @@ interface TabsProp { const AntdTabs = (props: TabsProp) => { //get data - const items = strToNode(props['items'],props['size']) + const {color, font, backgroundColor, size, primaryColor, textColor, theme} = getTheme(props); + + const items = strToNode(props['items'], size) const index = props['index'] const align = props['align'] const position = props['position'] const variant = props['variant'] const height = props['height'] const grow = props['use_container_width'] - const size = props['size'] - const color = props['color'] const return_index = props['return_index'] const kv = props['kv'] - const primaryColor = GetColor(color == null ? '--primary-color' : color) - const textColor = GetColor('--text-color') const borderColor = RgbaColor(textColor, 0.1) - const bgColor = GetColor('--background-color') const [activeKey, setActiveKey] = useState(index) @@ -65,10 +61,10 @@ const AntdTabs = (props: TabsProp) => { .ant-tabs-card .ant-tabs-tab-active{ border-width: 1px; border-style: solid; - border-color: ${position === 'top' ? `${borderColor} ${borderColor} ${bgColor} ${borderColor}` : - position === 'bottom' ? `${bgColor} ${borderColor} ${borderColor} ${borderColor}` : - position === 'left' ? `${borderColor} ${bgColor} ${borderColor} ${borderColor}` : - position === 'right' ? `${borderColor} ${borderColor} ${borderColor} ${bgColor}` : ''} !important + border-color: ${position === 'top' ? `${borderColor} ${borderColor} ${backgroundColor} ${borderColor}` : + position === 'bottom' ? `${backgroundColor} ${borderColor} ${borderColor} ${borderColor}` : + position === 'left' ? `${borderColor} ${backgroundColor} ${borderColor} ${borderColor}` : + position === 'right' ? `${borderColor} ${borderColor} ${borderColor} ${backgroundColor}` : ''} !important } ` let growStyle = ` @@ -116,17 +112,13 @@ const AntdTabs = (props: TabsProp) => { theme={{ components: { Tabs: { + ...theme, itemActiveColor: primaryColor, itemHoverColor: primaryColor, itemSelectedColor: primaryColor, inkBarColor: primaryColor, - colorBgContainer: bgColor, - colorText: 'var(--text-color)', colorTextDisabled: RgbaColor(textColor, 0.5), - colorPrimary: primaryColor, colorBgContainerDisabled: 'transform', - fontSize: getSize(size), - fontFamily: 'var(--font)', cardBg: 'transparent', cardGutter: variant === 'outline' ? 0 : 2, cardHeight: getSize(size) + 25, diff --git a/streamlit_antd_components/frontend/src/ts/Tag.tsx b/streamlit_antd_components/frontend/src/ts/Tag.tsx index 0aa2301..97626d2 100644 --- a/streamlit_antd_components/frontend/src/ts/Tag.tsx +++ b/streamlit_antd_components/frontend/src/ts/Tag.tsx @@ -1,41 +1,36 @@ import {Streamlit} from "streamlit-component-lib"; import React, {useEffect} from "react"; -import {Space, Tag, ConfigProvider} from 'antd'; -import {MartineRadiusSize, GetColor, RgbaColor, getSize, insertStyle} from "../js/utils.react"; -import {CustomIcon} from "./utils"; +import {ConfigProvider, Space, Tag} from 'antd'; +import {GetColor, getSize, getTheme, insertStyle, MartineRadiusSize, RgbaColor} from "../js/utils.react"; +import {BaseProp, CustomIcon} from "./utils"; -interface tagProp { +interface tagProp extends BaseProp { label: any - color: any radius: any - size: any icon: any link: any bordered: any closable: any } -interface TagsProp { +interface TagsProp extends BaseProp { items: tagProp[] align?: string direction?: "horizontal" | "vertical" - size?: any radius?: any - color?: any style?: React.CSSProperties } const AntdTag = (props: tagProp) => { //get data + const {color, font, backgroundColor, size, primaryColor, textColor, theme} = getTheme(props); + const label = props['label']; - const color = props['color']; const radius = props['radius'] || 'md'; - const size = props['size'] || 'sm'; const icon = props['icon']; const link = props['link']; const bordered = props['bordered']; const closable = props['closable']; - const textColor = GetColor('--text-color') useEffect(() => Streamlit.setFrameHeight()) @@ -73,12 +68,12 @@ const AntdTag = (props: tagProp) => { const AntdTags = (props: TagsProp) => { //get data + const {color, font, backgroundColor, size, primaryColor, textColor, theme} = getTheme(props); + const items = props['items']; const align = props['align']; const direction = props['direction']; - const size = props['size']; const radius = props['radius']; - const color = props['color']; const style = props['style']; useEffect(() => Streamlit.setFrameHeight()) @@ -95,6 +90,7 @@ const AntdTags = (props: TagsProp) => { theme={{ components: { Tag: { + ...theme, defaultColor: 'var(--text-color)', defaultBg: RgbaColor(GetColor('--text-color'), 0.05), colorFillSecondary: RgbaColor(GetColor('--primary-color'), 0.1), diff --git a/streamlit_antd_components/frontend/src/ts/Transfer.tsx b/streamlit_antd_components/frontend/src/ts/Transfer.tsx index 06fc930..5f5b721 100644 --- a/streamlit_antd_components/frontend/src/ts/Transfer.tsx +++ b/streamlit_antd_components/frontend/src/ts/Transfer.tsx @@ -1,14 +1,14 @@ import {Streamlit} from "streamlit-component-lib"; import React, {useEffect, useState} from "react"; -import {Transfer, ConfigProvider, Button} from 'antd'; +import {Button, ConfigProvider, Transfer} from 'antd'; import {ReloadOutlined} from '@ant-design/icons'; import type {TransferDirection, TransferListProps} from 'antd/es/transfer'; -import {GetColor, RgbaColor, DarkenColor, insertStyle} from "../js/utils.react" -import {strToNode, numberToStr} from "../js/transfer.react"; +import {DarkenColor, GetColor, getTheme, insertStyle, RgbaColor} from "../js/utils.react" +import {numberToStr, strToNode} from "../js/transfer.react"; import '../css/transfer.css' -import {LabelWrap} from "./utils"; +import {BaseProp, LabelWrap} from "./utils"; -interface TransferProp { +interface TransferProp extends BaseProp { label: any description: any items: any[] @@ -17,7 +17,6 @@ interface TransferProp { search: boolean pagination: boolean oneway: boolean - color: any align: any reload: boolean | string disabled: boolean @@ -31,6 +30,8 @@ interface TransferProp { const AntdTransfer = (props: TransferProp) => { //get data + const {color, font, backgroundColor, size, primaryColor, textColor, theme} = getTheme(props); + const label = props['label'] const description = props['description'] const items = strToNode(props['items']) @@ -39,7 +40,6 @@ const AntdTransfer = (props: TransferProp) => { const search = props['search'] const pagination = props['pagination'] const oneway = props['oneway'] - const color = props['color'] const align = props['align'] const reload = props['reload'] const disabled = props['disabled'] @@ -48,9 +48,7 @@ const AntdTransfer = (props: TransferProp) => { const grow = props['use_container_width'] const return_index = props['return_index'] const kv = props['kv'] - const primaryColor = GetColor(color == null ? '--primary-color' : color) const secondaryBgColor = GetColor('--secondary-background-color') - const textColor = GetColor('--text-color') //data source const [dataSource, setDataSource] = useState(items) @@ -84,7 +82,7 @@ const AntdTransfer = (props: TransferProp) => { theme={{ components: { Button: { - colorPrimary: primaryColor, + ...theme, } } }} diff --git a/streamlit_antd_components/frontend/src/ts/Tree.tsx b/streamlit_antd_components/frontend/src/ts/Tree.tsx index 11ab5d4..11f9ef8 100644 --- a/streamlit_antd_components/frontend/src/ts/Tree.tsx +++ b/streamlit_antd_components/frontend/src/ts/Tree.tsx @@ -1,21 +1,19 @@ import {Streamlit} from "streamlit-component-lib"; import React, {useEffect, useState} from "react"; import type {TreeProps} from 'antd/es/tree'; -import {Tree, ConfigProvider} from 'antd'; +import {ConfigProvider, Tree} from 'antd'; import {CaretDownFilled} from '@ant-design/icons'; import {strToNode} from "../js/tree.react"; -import {reindex, getCollapseKeys, getParentKeys, insertStyle, GetColor, RgbaColor, getSize} from "../js/utils.react" +import {getCollapseKeys, getParentKeys, getSize, getTheme, insertStyle, reindex, RgbaColor} from "../js/utils.react" import '../css/tree.css' -import {LabelWrap} from "./utils"; +import {BaseProp, LabelWrap} from "./utils"; -interface TreeProp { +interface TreeProp extends BaseProp { label: any description: any items: any[] index: any icon: any - size: any - color: any align: any width: any height: any @@ -29,16 +27,15 @@ interface TreeProp { } const AntdTree = (props: TreeProp) => { - const textColor = GetColor('--text-color') //get data + const {color, font, backgroundColor, size, primaryColor, textColor, theme} = getTheme(props); + const label = props['label'] const description = props['description'] - const size = props['size'] const items = strToNode(props.items, size, props.icon, RgbaColor(textColor, 0.5)) const dsk = reindex(props.index, false) const openIndex = reindex(props.open_index, false) const openAll = props['open_all'] - const color = props['color'] const height = props['height'] const width = props['width'] const align = props['align'] @@ -48,7 +45,6 @@ const AntdTree = (props: TreeProp) => { const return_index = props['return_index'] const kv = props['kv'] const dok = openAll ? getCollapseKeys(items) : openIndex ? openIndex : dsk && getParentKeys(dsk, items) - const primaryColor = GetColor(color == null ? '--primary-color' : color) const primaryLightColor = RgbaColor(primaryColor) //state @@ -65,7 +61,7 @@ const AntdTree = (props: TreeProp) => { font-size: ${getSize(size) - 2}px !important; } .ant-tree-title{ - line-height:${getSize(size)+2}px !important + line-height:${getSize(size) + 2}px !important } .ant-tree-checkbox-indeterminate .ant-tree-checkbox-inner:after{ width:50% !important; @@ -95,16 +91,13 @@ const AntdTree = (props: TreeProp) => { theme={{ components: { Tree: { - colorPrimary: primaryColor, + ...theme, colorPrimaryHover: primaryColor, colorBgContainer: 'transform', - colorText: 'var(--text-color)', colorTextDisabled: RgbaColor(textColor, 0.5), controlItemBgHover: RgbaColor(textColor), controlItemBgActive: primaryLightColor, controlInteractiveSize: getSize(size) + 2, - fontSize: getSize(size), - fontFamily: 'var(--font)', colorBorder: RgbaColor(textColor, 0.4), }, }, diff --git a/streamlit_antd_components/frontend/src/ts/utils.tsx b/streamlit_antd_components/frontend/src/ts/utils.tsx index f587a42..dd3aa34 100644 --- a/streamlit_antd_components/frontend/src/ts/utils.tsx +++ b/streamlit_antd_components/frontend/src/ts/utils.tsx @@ -2,6 +2,15 @@ import React from "react"; import {GetColor, getSize, markdown, RgbaColor} from "../js/utils.react"; import * as antIcon from "@ant-design/icons"; + +interface BaseProp { + color: any; + background_color: any; + size: any; + font: any; +} + + interface CustomIconProps { icon: { size: any, color: any, name: any, type: any } | null | any style?: React.CSSProperties @@ -76,4 +85,5 @@ const LabelWrap = (props: LabelWrapProps) => { } -export {CustomIcon, LabelWrap}; \ No newline at end of file +export {CustomIcon, LabelWrap}; +export type {BaseProp}; \ No newline at end of file diff --git a/streamlit_antd_components/utils/__init__.py b/streamlit_antd_components/utils/__init__.py index 2cfed45..cc95d64 100644 --- a/streamlit_antd_components/utils/__init__.py +++ b/streamlit_antd_components/utils/__init__.py @@ -8,13 +8,13 @@ @Project : StreamlitAntdComponents @Software : PyCharm """ +import inspect + +from .callback import register +from .component_func import component from .data_class import * -from .setting import * from .parser import * -from .component_func import component -from .callback import register -from typing import Callable, Union, Dict, Tuple, Any, List, Literal -import inspect +from .setting import * def get_func_name(): diff --git a/streamlit_antd_components/utils/callback.py b/streamlit_antd_components/utils/callback.py index 6624ec0..4774082 100644 --- a/streamlit_antd_components/utils/callback.py +++ b/streamlit_antd_components/utils/callback.py @@ -52,4 +52,4 @@ def register(key, callback, args, kwargs): assert key is not None, 'Please set a key in component !' args = args if args is not None else [] kwargs = kwargs if kwargs is not None else {} - register_callback(key, callback, *args, **kwargs) \ No newline at end of file + register_callback(key, callback, *args, **kwargs) diff --git a/streamlit_antd_components/utils/component_func.py b/streamlit_antd_components/utils/component_func.py index 5ec473e..37076e3 100644 --- a/streamlit_antd_components/utils/component_func.py +++ b/streamlit_antd_components/utils/component_func.py @@ -10,11 +10,26 @@ """ import json import os -import streamlit.components.v1 as components -import streamlit as st from dataclasses import is_dataclass +from typing import Union + +import streamlit as st +import streamlit.components.v1 as components + +import streamlit_antd_components as sac from .. import _RELEASE + +def parse_theme( + key: str, + value: Union[str, int, None], +) -> Union[str, int]: + _theme = sac._theme + if value is None: + value = _theme.get(key) + return value + + if not _RELEASE: component_func = components.declare_component( "sac", @@ -49,6 +64,7 @@ def default(self, obj): def component(id, kw, default=None, key=None): + kw = {k: parse_theme(k, v) for k, v in kw.items()} # repair component session init value if key is not None and key not in st.session_state: st.session_state[key] = default diff --git a/streamlit_antd_components/utils/data_class.py b/streamlit_antd_components/utils/data_class.py index ba2de2a..f5c69a7 100644 --- a/streamlit_antd_components/utils/data_class.py +++ b/streamlit_antd_components/utils/data_class.py @@ -10,6 +10,7 @@ """ from dataclasses import dataclass from typing import List, Literal, Union + from .setting import Color, MantineSize, MantineColor __all__ = [ @@ -96,6 +97,7 @@ class ChipItem(Item): class ButtonsItem(Item): href: str = None # link address color: Union[MantineColor, str] = None # button color + background_color: Union[MantineColor, str] = None # background color @dataclass diff --git a/streamlit_antd_components/utils/parser.py b/streamlit_antd_components/utils/parser.py index 60782a2..1f4afc7 100644 --- a/streamlit_antd_components/utils/parser.py +++ b/streamlit_antd_components/utils/parser.py @@ -8,10 +8,11 @@ @Project : StreamlitAntdComponents @Software : PyCharm """ -from .data_class import BsIcon, AntIcon, Tag from dataclasses import is_dataclass from typing import List, Union, Callable, Any +from .data_class import BsIcon, AntIcon, Tag + __all__ = ['update_kw', 'update_index', 'get_default', 'ParseItems', 'parse_icon'] @@ -35,6 +36,12 @@ def parse_tag(tag): return tag +# def parse_theme(theme): +# for k in theme.keys(): +# if k not in ['color', 'size', 'font', 'background_color']: +# raise ValueError(f'unsupported theme key {k}') + + def update_kw(kw: dict, **kwargs): r = kw.copy() r.update(**kwargs) @@ -71,8 +78,8 @@ class ParseItems: def __init__(self, items: List[Union[str, dict, Any]], format_func: Union[str, Callable] = None): """ - :param items: component items data - :param format_func: format component item label func + :param items: component items data + :param format_func: format component item label func """ self.items = items if items is not None else [] self.format_func = format_func diff --git a/streamlit_antd_components/utils/setting.py b/streamlit_antd_components/utils/setting.py index eb7151d..72deca8 100644 --- a/streamlit_antd_components/utils/setting.py +++ b/streamlit_antd_components/utils/setting.py @@ -11,7 +11,7 @@ from typing import Literal __all__ = [ - 'Formatter', 'Align', 'Direction', 'MantineSize', 'Msg', 'Status', 'Position', + 'Formatter', 'Align', 'Direction', 'MantineSize', 'MantineFont', 'Msg', 'Status', 'Position', 'Color', 'MantineColor', 'MantinePosition', ] # global field type @@ -26,5 +26,6 @@ MantineSize = Literal['xs', 'sm', 'md', 'lg', 'xl'] MantinePosition = Literal["left", "right"] MantineColor = Literal[ - 'dark', 'gray', 'red', 'pink', 'grape', 'violet', 'indigo', 'blue', 'cyan', 'teal', 'green', 'lime', 'yellow', 'orange' + 'dark', 'gray', 'red', 'pink', 'grape', 'violet', 'indigo', 'blue', 'cyan', 'teal', 'green', 'lime', 'yellow', 'orange', 'white' ] +MantineFont = Literal['arial', 'helvetica', 'tahoma', 'verdana', 'monospace', 'georgia', 'times new roman', 'serif'] diff --git a/streamlit_antd_components/widgets/__init__.py b/streamlit_antd_components/widgets/__init__.py index e9dbec0..0cd3198 100644 --- a/streamlit_antd_components/widgets/__init__.py +++ b/streamlit_antd_components/widgets/__init__.py @@ -8,20 +8,22 @@ @Project : StreamlitAntdComponents @Software : PyCharm """ +from .alert import alert from .buttons import buttons -from .menu import menu -from .tabs import tabs -from .tree import tree from .cascader import cascader +from .checkbox import checkbox +from .chip import chip +from .color_picker import color_picker from .divider import divider -from .switch import switch -from .transfer import transfer -from .segmented import segmented -from .alert import alert +from .menu import menu +from .pagination import pagination from .rate import rate -from .steps import steps -from .checkbox import checkbox from .result import result +from .segmented import segmented +from .steps import steps +from .switch import switch +from .tabs import tabs from .tag import tags -from .pagination import pagination -from .chip import chip +from .theme import theme +from .transfer import transfer +from .tree import tree diff --git a/streamlit_antd_components/widgets/alert.py b/streamlit_antd_components/widgets/alert.py index c161778..a3e1e31 100644 --- a/streamlit_antd_components/widgets/alert.py +++ b/streamlit_antd_components/widgets/alert.py @@ -9,35 +9,43 @@ @Software : PyCharm """ -from ..utils import * +from typing import List, Union, Literal + +import streamlit_antd_components.utils as u +from streamlit_antd_components.utils import MantineColor, MantineSize, MantineFont, BsIcon, AntIcon, Banner def alert( label: str, description: str = None, - size: Union[MantineSize, int] = 'md', - color: Union[Msg, MantineColor, str] = 'info', - radius: Union[MantineSize, int] = 'md', + radius: Union[u.MantineSize, int] = 'md', variant: Literal['light', 'filled', 'outline', 'transparent', 'quote', 'quote-light'] = 'light', - icon: Union[bool, str, BsIcon, AntIcon] = False, - closable: bool = False, - banner: Union[bool, List[bool], Banner, List[Banner]] = False, + icon: Union[bool, str, BsIcon, AntIcon] = True, + closable: bool = True, + banner: Union[bool, List[bool], Banner, List[Banner]] = True, key=None, + color: Union[MantineColor, str] = None, + background_color: Union[MantineColor, str] = None, + size: Union[MantineSize, int] = None, + font: Union[MantineFont, str] = None, + ): """antd design alert https://ant.design/components/alert :param label: alert content,support str and markdown str :param description: content description,support str and markdown str - :param size: alert size,support mantine size and int in px - :param color: alert color,support 'success', 'info', 'warning', 'error' and mantine color, hex and rgb color :param radius: alert radius,support mantine size and int in px :param variant: alert variant :param icon: show icon or custom icon :param closable: show close button :param banner: banner style,set list to control message and description banner. :param key: component unique identifier + :param color: alert color,support 'success', 'info', 'warning', 'error' and mantine color, hex and rgb color + :param background_color: alert background color,support mantine color, hex and rgb color + :param size: alert size,support mantine size and int in px + :param font: alert font,support mantine font and str """ # update icon - kw = update_kw(locals(), icon=parse_icon(icon)) + kw = u.update_kw(locals(), icon=u.parse_icon(icon)) # pass component id and params to frontend - component(id=get_func_name(), kw=kw, key=key) + u.component(id=u.get_func_name(), kw=kw, key=key) diff --git a/streamlit_antd_components/widgets/buttons.py b/streamlit_antd_components/widgets/buttons.py index 4ce0d67..34a53cb 100644 --- a/streamlit_antd_components/widgets/buttons.py +++ b/streamlit_antd_components/widgets/buttons.py @@ -8,20 +8,20 @@ @Project : StreamlitAntdComponents @Software : PyCharm """ +from typing import List, Union, Literal, Callable, Tuple, Any, Dict -from ..utils import * +import streamlit_antd_components.utils as u +from streamlit_antd_components.utils import MantineSize, MantineFont, MantineColor, Align, Direction def buttons( - items: List[Union[str, dict, ButtonsItem]], - index: Union[int, None] = 0, - format_func: Union[Formatter, Callable] = None, + items: List[Union[str, dict, u.ButtonsItem]], + index: Literal[0, 1] = 0, + format_func: Union[u.Formatter, Callable] = None, label: str = None, description: str = None, - size: Union[MantineSize, int] = 'md', radius: Union[MantineSize, int] = 'md', variant: Literal['filled', 'outline', 'dashed', 'text', 'link'] = 'outline', - color: Union[MantineColor, str] = None, align: Align = 'start', direction: Direction = 'horizontal', gap: Union[MantineSize, int] = 'sm', @@ -31,6 +31,11 @@ def buttons( args: Tuple[Any, ...] = None, kwargs: Dict[str, Any] = None, key=None, + color: Union[MantineColor, str] = None, + background_color: Union[MantineColor, str] = None, + size: Union[MantineSize, int] = None, + font: Union[MantineFont, str] = None, + ) -> Union[str, int, None]: """antd design a group of buttons @@ -42,7 +47,6 @@ def buttons( :param size: button size,support mantine size and int in px :param radius: button radius,support mantine size and int in px :param variant: buttons variant - :param color: buttons color,default streamlit primary color,support mantine color, hex and rgb color :param align: buttons align,available when direction='horizontal' :param direction: buttons direction :param gap: buttons gap,support mantine size and int in px.set as 0 to display compact mode @@ -52,15 +56,19 @@ def buttons( :param args: callback args :param kwargs: callback kwargs :param key: component unique identifier - :return: selected button label or index + :param color: alert color,support 'success', 'info', 'warning', 'error' and mantine color, hex and rgb color + :param background_color: alert background color,support mantine color, hex and rgb color + :param size: alert size,support mantine size and int in px + :param font: alert font,support mantine font and str + :return: selected button label or index """ # register callback - register(key, on_change, args, kwargs) + u.register(key, on_change, args, kwargs) # parse items - items, kv = ParseItems(items, format_func).single() + items, kv = u.ParseItems(items, format_func).single() # component params - kw = update_kw(locals(), items=items) + kw = u.update_kw(locals(), items=items) # component default - default = get_default(index, return_index, kv) + default = u.get_default(index, return_index, kv) # pass component id and params to frontend - return component(id=get_func_name(), kw=kw, default=default, key=key) + return u.component(id=u.get_func_name(), kw=kw, default=default, key=key) diff --git a/streamlit_antd_components/widgets/cascader.py b/streamlit_antd_components/widgets/cascader.py index 8f70268..bf5b2d9 100644 --- a/streamlit_antd_components/widgets/cascader.py +++ b/streamlit_antd_components/widgets/cascader.py @@ -9,7 +9,10 @@ @Software : PyCharm """ -from ..utils import * +from typing import List, Union, Callable, Tuple, Any, Dict + +import streamlit_antd_components.utils as u +from streamlit_antd_components.utils import MantineSize, MantineFont, MantineColor, Formatter, CasItem def cascader( @@ -19,7 +22,6 @@ def cascader( description: str = None, format_func: Union[Formatter, Callable] = None, placeholder: str = 'Please choose', - color: Union[MantineColor, str] = None, multiple: bool = False, disabled: bool = False, search: bool = False, @@ -29,7 +31,12 @@ def cascader( on_change: Callable = None, args: Tuple[Any, ...] = None, kwargs: Dict[str, Any] = None, - key=None + key=None, + color: Union[MantineColor, str] = None, + background_color: Union[MantineColor, str] = None, + size: Union[MantineSize, int] = None, + font: Union[MantineFont, str] = None, + ) -> List[Union[str, int]]: """antd design cascader https://ant.design/components/cascader @@ -39,7 +46,6 @@ def cascader( :param description: cascader description,support str and markdown str :param format_func: label formatter function,receive str and return str :param placeholder: placeholder - :param color: primary color,default streamlit primary color,support mantine color, hex and rgb color :param multiple: multiple select :param disabled: disabled status :param search: allow search @@ -50,18 +56,23 @@ def cascader( :param args: callback args :param kwargs: callback kwargs :param key: component unique identifier - :return: list of selected item label or index + :param color: alert color,support 'success', 'info', 'warning', 'error' and mantine color, hex and rgb color + :param background_color: alert background color,support mantine color, hex and rgb color + :param size: alert size,support mantine size and int in px + :param font: alert font,support mantine font and str + + :return: list of selected item label or index """ # register callback - register(key, on_change, args, kwargs) + u.register(key, on_change, args, kwargs) # parse items - items, kv = ParseItems(items, format_func).multi(field='value') + items, kv = u.ParseItems(items, format_func).multi(field='value') # parse index if index is None: index = [] # component params - kw = update_kw(locals(), items=items) + kw = u.update_kw(locals(), items=items) # component default - default = get_default(index, return_index, kv) + default = u.get_default(index, return_index, kv) # pass component id and params to frontend - return component(id=get_func_name(), kw=kw, default=default, key=key) + return u.component(id=u.get_func_name(), kw=kw, default=default, key=key) diff --git a/streamlit_antd_components/widgets/checkbox.py b/streamlit_antd_components/widgets/checkbox.py index 8486889..c27820f 100644 --- a/streamlit_antd_components/widgets/checkbox.py +++ b/streamlit_antd_components/widgets/checkbox.py @@ -8,7 +8,10 @@ @Project : StreamlitAntdComponents @Software : PyCharm """ -from ..utils import * +from typing import List, Union, Callable, Tuple, Any, Dict + +import streamlit_antd_components.utils as u +from streamlit_antd_components.utils import MantineSize, MantineFont, MantineColor, Align, Formatter, CheckboxItem def checkbox( @@ -17,9 +20,7 @@ def checkbox( format_func: Union[Formatter, Callable] = None, label: str = None, description: str = None, - size: Union[MantineSize, int] = 'sm', radius: Union[MantineSize, int] = 'sm', - color: Union[MantineColor, str] = None, align: Align = 'start', check_all: Union[bool, str] = False, disabled: bool = False, @@ -28,6 +29,11 @@ def checkbox( args: Tuple[Any, ...] = None, kwargs: Dict[str, Any] = None, key=None, + color: Union[MantineColor, str] = None, + background_color: Union[MantineColor, str] = None, + size: Union[MantineSize, int] = None, + font: Union[MantineFont, str] = None, + ) -> List[Union[str, int]]: """antd design checkbox https://ant.design/components/checkbox @@ -38,7 +44,6 @@ def checkbox( :param description: checkbox description,support str and markdown str :param size: checkbox item size :param radius: checkbox item radius - :param color: checkbox color,default streamlit primary color,support mantine color, hex and rgb color :param align: checkbox align :param check_all: check all box label :param disabled: disable checkbox @@ -47,17 +52,21 @@ def checkbox( :param args: callback args :param kwargs: callback kwargs :param key: component key - :return: selected item label or index + :param color: alert color,support 'success', 'info', 'warning', 'error' and mantine color, hex and rgb color + :param background_color: alert background color,support mantine color, hex and rgb color + :param size: alert size,support mantine size and int in px + :param font: alert font,support mantine font and str + :return: selected item label or index """ # register callback - register(key, on_change, args, kwargs) + u.register(key, on_change, args, kwargs) # parse items - items, kv = ParseItems(items, format_func).single(key_field='value') + items, kv = u.ParseItems(items, format_func).single(key_field='value') # parse index - index = update_index(index) + index = u.update_index(index) # component params - kw = update_kw(locals(), items=items, index=index) + kw = u.update_kw(locals(), items=items, index=index) # component default - default = get_default(index, return_index, kv) + default = u.get_default(index, return_index, kv) # pass component id and params to frontend - return component(id=get_func_name(), kw=kw, default=default, key=key) + return u.component(id=u.get_func_name(), kw=kw, default=default, key=key) diff --git a/streamlit_antd_components/widgets/chip.py b/streamlit_antd_components/widgets/chip.py index 3a87f0e..cffe47b 100644 --- a/streamlit_antd_components/widgets/chip.py +++ b/streamlit_antd_components/widgets/chip.py @@ -8,7 +8,11 @@ @Project : StreamlitAntdComponents @Software : PyCharm """ -from ..utils import * +from typing import List, Union, Literal, Callable, Tuple, Any, Dict + +import streamlit_antd_components.utils as u +from streamlit_antd_components.utils import MantineSize, MantineFont, MantineColor, Align, Direction, \ + Formatter, ChipItem def chip( @@ -19,16 +23,19 @@ def chip( description: str = None, align: Align = 'start', direction: Direction = 'horizontal', - size: Union[MantineSize, int] = 'md', radius: Union[MantineSize, int] = 'lg', variant: Literal['outline', 'light', 'filled'] = 'filled', - color: Union[MantineColor, str] = None, multiple: bool = False, return_index: bool = False, on_change: Callable = None, args: Tuple[Any, ...] = None, kwargs: Dict[str, Any] = None, key=None, + color: Union[MantineColor, str] = None, + background_color: Union[MantineColor, str] = None, + size: Union[MantineSize, int] = None, + font: Union[MantineFont, str] = None, + ) -> Union[str, int, List[str], List[int]]: """mantine chip https://mantine.dev/core/chip/ @@ -42,27 +49,30 @@ def chip( :param size: chip item size,support mantine size and int in px :param radius: chip item radius,support mantine size and int in px :param variant: chip item style - :param color: chip color,default streamlit primary color,support mantine color, hex and rgb color :param multiple: chip multiple mode :param return_index: return select item index :param on_change: item change callback :param args: callback args :param kwargs: callback kwargs :param key: component key - :return: selected item label or index + :param color: alert color,support 'success', 'info', 'warning', 'error' and mantine color, hex and rgb color + :param background_color: alert background color,support mantine color, hex and rgb color + :param size: alert size,support mantine size and int in px + :param font: alert font,support mantine font and str + :return: selected item label or index """ # register callback - register(key, on_change, args, kwargs) + u.register(key, on_change, args, kwargs) # parse items - items, kv = ParseItems(items, format_func).single(key_field='value') + items, kv = u.ParseItems(items, format_func).single(key_field='value') # parse index if not multiple and isinstance(index, list): index = index[0] if multiple: - index = update_index(index) + index = u.update_index(index) # component params - kw = update_kw(locals(), items=items) + kw = u.update_kw(locals(), items=items) # component default - default = get_default(index, return_index, kv) + default = u.get_default(index, return_index, kv) # pass component id and params to frontend - return component(id=get_func_name(), kw=kw, default=default, key=key) + return u.component(id=u.get_func_name(), kw=kw, default=default, key=key) diff --git a/streamlit_antd_components/widgets/color_picker.py b/streamlit_antd_components/widgets/color_picker.py new file mode 100644 index 0000000..a22fb46 --- /dev/null +++ b/streamlit_antd_components/widgets/color_picker.py @@ -0,0 +1,54 @@ +#!/usr/bin/env python +# _*_coding:utf-8_*_ + +""" +@Time : 2023/6/7 10:23 +@Author : ji hao ran +@File : cascader.py +@Project : StreamlitAntdComponents +@Software : PyCharm +""" + +from typing import List, Union, Callable, Tuple, Any, Dict + +import streamlit_antd_components.utils as u +from streamlit_antd_components.utils import MantineSize, MantineFont, MantineColor, Formatter, CasItem + + +def color_picker( + label: str = None, + description: str = None, + on_change: Callable = None, + args: Tuple[Any, ...] = None, + kwargs: Dict[str, Any] = None, + key=None, + color: Union[MantineColor, str] = None, + background_color: Union[MantineColor, str] = None, + size: Union[MantineSize, int] = None, + font: Union[MantineFont, str] = None, + +) -> List[Union[str, int]]: + """ant design color-picker https://ant.design/components/color-picker + + :param on_change: item change callback + :param args: callback args + :param kwargs: callback kwargs + :param key: component unique identifier + :param color: alert color,support 'success', 'info', 'warning', 'error' and mantine color, hex and rgb color + :param background_color: alert background color,support mantine color, hex and rgb color + :param size: alert size,support mantine size and int in px + :param font: alert font,support mantine font and str + + :return: list of selected item label or index + """ + # register callback + u.register(key, on_change, args, kwargs) + # parse items + # items, kv = u.ParseItems(items, format_func).multi(field='value') + # parse index + # component params + kw = u.update_kw(locals()) + # component default + # default = 0 + # pass component id and params to frontend + return u.component(id=u.get_func_name(), kw=kw, key=key) diff --git a/streamlit_antd_components/widgets/divider.py b/streamlit_antd_components/widgets/divider.py index fac54e2..bdd411b 100644 --- a/streamlit_antd_components/widgets/divider.py +++ b/streamlit_antd_components/widgets/divider.py @@ -9,17 +9,24 @@ @Software : PyCharm """ -from ..utils import * +from typing import Union, Literal + +import streamlit_antd_components.utils as u +from streamlit_antd_components.utils import MantineSize, MantineColor, Align, BsIcon, AntIcon, \ + MantineFont def divider( label: str = None, icon: Union[str, BsIcon, AntIcon] = None, - align: Align = 'start', - size: Union[MantineSize, int] = 'xs', + align: Align = 'center', variant: Literal['solid', 'dashed', 'dotted'] = 'solid', - color: MantineColor = None, - key=None + key=None, + color: Union[MantineColor, str] = None, + background_color: Union[MantineColor, str] = None, + size: Union[MantineSize, int] = "xs", + font: Union[MantineFont, str] = None, + ): """mantine divider component https://v6.mantine.dev/core/divider/ @@ -28,10 +35,13 @@ def divider( :param align: label align :param size: divider size,support mantine size and int in px :param variant: divider variant - :param color: divider color + + + + divider color :param key: component unique identifier """ # update icon - kw = update_kw(locals(), icon=parse_icon(icon)) + kw = u.update_kw(locals(), icon=u.parse_icon(icon)) # pass component id and params to frontend - component(id=get_func_name(), kw=kw, key=key) + u.component(id=u.get_func_name(), kw=kw, key=key) diff --git a/streamlit_antd_components/widgets/menu.py b/streamlit_antd_components/widgets/menu.py index 829b5ed..895c0b6 100644 --- a/streamlit_antd_components/widgets/menu.py +++ b/streamlit_antd_components/widgets/menu.py @@ -9,16 +9,17 @@ @Software : PyCharm """ -from ..utils import * +from typing import List, Union, Literal, Callable, Tuple, Any, Dict + +import streamlit_antd_components.utils as u +from streamlit_antd_components.utils import MantineSize, MantineFont, MantineColor, Formatter, MenuItem def menu( items: List[Union[str, dict, MenuItem]], index: int = 0, format_func: Union[Formatter, Callable] = None, - size: Union[MantineSize, int] = 'md', variant: Literal['light', 'filled', 'subtle', 'left-bar', 'right-bar'] = 'light', - color: Union[MantineColor, str] = None, indent: int = 24, height: int = None, open_index: List[int] = None, @@ -27,7 +28,12 @@ def menu( on_change: Callable = None, args: Tuple[Any, ...] = None, kwargs: Dict[str, Any] = None, - key=None + key=None, + color: Union[MantineColor, str] = None, + background_color: Union[MantineColor, str] = None, + size: Union[MantineSize, int] = None, + font: Union[MantineFont, str] = None, + ) -> Union[str, int]: """antd design menu component https://ant.design/components/menu#menu @@ -36,7 +42,6 @@ def menu( :param format_func: label formatter function,receive str and return str :param size: menu size,support mantine size and int in px :param variant: menu variant - :param color: menu color,default streamlit primary color,support mantine color, hex and rgb color :param indent: menu item indent in px :param height: menu height in px :param open_index: default opened indexes.if none,menu will open default index's all parent nodes. @@ -46,15 +51,19 @@ def menu( :param args: callback args :param kwargs: callback kwargs :param key: component unique identifier - :return: selected menu label or index + :param color: alert color,support 'success', 'info', 'warning', 'error' and mantine color, hex and rgb color + :param background_color: alert background color,support mantine color, hex and rgb color + :param size: alert size,support mantine size and int in px + :param font: alert font,support mantine font and str + :return: selected menu label or index """ # register callback - register(key, on_change, args, kwargs) + u.register(key, on_change, args, kwargs) # parse items - items, kv = ParseItems(items, format_func).multi() + items, kv = u.ParseItems(items, format_func).multi() # component params - kw = update_kw(locals(), items=items) + kw = u.update_kw(locals(), items=items) # component default - default = get_default(index, return_index, kv) + default = u.get_default(index, return_index, kv) # pass component id and params to frontend - return component(id=get_func_name(), kw=kw, default=default, key=key) + return u.component(id=u.get_func_name(), kw=kw, default=default, key=key) diff --git a/streamlit_antd_components/widgets/pagination.py b/streamlit_antd_components/widgets/pagination.py index 044addc..4ddc9b9 100644 --- a/streamlit_antd_components/widgets/pagination.py +++ b/streamlit_antd_components/widgets/pagination.py @@ -8,7 +8,10 @@ @Project : StreamlitAntdComponents @Software : PyCharm """ -from ..utils import * +from typing import Union, Literal, Callable, Tuple, Any, Dict + +import streamlit_antd_components.utils as u +from streamlit_antd_components.utils import MantineColor, MantineSize, MantineFont, Align def pagination( @@ -16,10 +19,8 @@ def pagination( index: int = 1, page_size: int = 10, align: Align = 'start', - size: Union[MantineSize, int] = 'md', radius: Union[MantineSize, int] = 'md', variant: Literal['outline', 'light', 'filled'] = 'outline', - color: Union[MantineColor, str] = None, previous: str = None, next: str = None, disabled: bool = False, @@ -30,6 +31,11 @@ def pagination( args: Tuple[Any, ...] = None, kwargs: Dict[str, Any] = None, key=None, + color: Union[MantineColor, str] = None, + background_color: Union[MantineColor, str] = None, + size: Union[MantineSize, int] = None, + font: Union[MantineFont, str] = None, + ) -> float: """antd design pagination https://ant.design/components/pagination @@ -40,7 +46,10 @@ def pagination( :param size: pagination size,support mantine size and int in px :param radius: pagination radius,support mantine size and int in px :param variant: pagination variant - :param color: pagination color,default streamlit primary color,support mantine color, hex and rgb color + + + + pagination color,default streamlit primary color,support mantine color, hex and rgb color :param previous: pagination previous button text :param next: pagination next button text :param disabled: disable pagination status @@ -51,9 +60,13 @@ def pagination( :param args: callback args :param kwargs: callback kwargs :param key: component key - :return: select page number + :param color: alert color,support 'success', 'info', 'warning', 'error' and mantine color, hex and rgb color + :param background_color: alert background color,support mantine color, hex and rgb color + :param size: alert size,support mantine size and int in px + :param font: alert font,support mantine font and str + :return: select page number """ # register callback - register(key, on_change, args, kwargs) + u.register(key, on_change, args, kwargs) # pass component id and params to frontend - return component(id=get_func_name(), kw=update_kw(locals()), default=index, key=key) + return u.component(id=u.get_func_name(), kw=u.update_kw(locals()), default=index, key=key) diff --git a/streamlit_antd_components/widgets/rate.py b/streamlit_antd_components/widgets/rate.py index 2aacdf6..9cc5e90 100644 --- a/streamlit_antd_components/widgets/rate.py +++ b/streamlit_antd_components/widgets/rate.py @@ -8,24 +8,29 @@ @Project : StreamlitAntdComponents @Software : PyCharm """ -from ..utils import * from dataclasses import is_dataclass +from typing import Union, Callable, Tuple, Any, Dict + +import streamlit_antd_components.utils as u +from streamlit_antd_components.utils import MantineSize, MantineFont, MantineColor, Align, BsIcon, AntIcon def rate( count: int = 5, - value: float = 0, + value: float = 3, label: str = None, description: str = None, symbol: Union[str, BsIcon, AntIcon] = None, - align: Align = 'start', - size: Union[MantineSize, int] = 'md', - color: Union[MantineColor, str] = None, + align: Align = 'center', half: bool = False, on_change: Callable = None, args: Tuple[Any, ...] = None, kwargs: Dict[str, Any] = None, key=None, + color: Union[MantineColor, str] = None, + background_color: Union[MantineColor, str] = None, + size: Union[MantineSize, int] = None, + font: Union[MantineFont, str] = None, ) -> float: """antd design rate https://ant.design/components/rate @@ -36,22 +41,25 @@ def rate( :param symbol: rate item symbol,default star,can be str or BsIcon,AntIcon :param align: rate align :param size: symbol size,support mantine size and int in px - :param color: symbol color,default streamlit primary color,support mantine color, hex and rgb color :param half: allow half select :param on_change: rate change callback :param args: callback args :param kwargs: callback kwargs :param key: component key - :return: select value + :param color: alert color,support 'success', 'info', 'warning', 'error' and mantine color, hex and rgb color + :param background_color: alert background color,support mantine color, hex and rgb color + :param size: alert size,support mantine size and int in px + :param font: alert font,support mantine font and str + :return: select value """ assert value % 0.5 == 0, 'value must be divisible by 0.5' if value % 1 != 0 and not half: raise ValueError('value must be int when half is False') # register callback - register(key, on_change, args, kwargs) + u.register(key, on_change, args, kwargs) # component params kw = dict(locals()) - kw.update(symbol=parse_icon(symbol) if is_dataclass(symbol) else symbol) - kw = update_kw(kw) + kw.update(symbol=u.parse_icon(symbol) if is_dataclass(symbol) else symbol) + kw = u.update_kw(kw) # pass component id and params to frontend - return component(id=get_func_name(), kw=kw, default=value, key=key) + return u.component(id=u.get_func_name(), kw=kw, default=value, key=key) diff --git a/streamlit_antd_components/widgets/result.py b/streamlit_antd_components/widgets/result.py index 7726649..1062239 100644 --- a/streamlit_antd_components/widgets/result.py +++ b/streamlit_antd_components/widgets/result.py @@ -9,7 +9,10 @@ @Software : PyCharm """ -from ..utils import * +from typing import Union + +import streamlit_antd_components.utils as u +from streamlit_antd_components.utils import Status, BsIcon, AntIcon def result( @@ -28,6 +31,6 @@ def result( :param key: component unique identifier """ # update icon - kw = update_kw(locals(), icon=parse_icon(icon)) + kw = u.update_kw(locals(), icon=u.parse_icon(icon)) # pass component id and params to frontend - component(id=get_func_name(), kw=kw, key=key) + u.component(id=u.get_func_name(), kw=kw, key=key) diff --git a/streamlit_antd_components/widgets/segmented.py b/streamlit_antd_components/widgets/segmented.py index f908183..14c1166 100644 --- a/streamlit_antd_components/widgets/segmented.py +++ b/streamlit_antd_components/widgets/segmented.py @@ -9,7 +9,11 @@ @Software : PyCharm """ -from ..utils import * +from typing import List, Union, Callable, Tuple, Any, Dict + +import streamlit_antd_components.utils as u +from streamlit_antd_components.utils import MantineSize, MantineFont, MantineColor, Align, Direction, \ + Formatter, SegmentedItem def segmented( @@ -20,10 +24,7 @@ def segmented( description: str = None, align: Align = 'start', direction: Direction = 'horizontal', - size: Union[MantineSize, int] = 'md', radius: Union[MantineSize, int] = 'md', - color: Union[MantineColor, str] = None, - bg_color: Union[MantineColor, str] = None, divider: bool = True, use_container_width: bool = False, disabled: bool = False, @@ -33,6 +34,11 @@ def segmented( args: Tuple[Any, ...] = None, kwargs: Dict[str, Any] = None, key=None, + color: Union[MantineColor, str] = None, + background_color: Union[MantineColor, str] = None, + size: Union[MantineSize, int] = None, + font: Union[MantineFont, str] = None, + ) -> Union[str, int]: """mantine segmentedControl https://mantine.dev/core/segmented-control/ @@ -45,8 +51,6 @@ def segmented( :param direction: segmented direction :param size: segmented size,support mantine size and int in px :param radius: segmented radius,support mantine size and int in px - :param color: segmented indicator background color,default streamlit primary color,support mantine color, hex and rgb color - :param bg_color: segmented background color,default streamlit secondary background color,support mantine color, hex and rgb color :param divider: show segmented vertical divider :param use_container_width: makes the segmented stretch its width to match the parent container :param disabled: disable segmented @@ -56,15 +60,19 @@ def segmented( :param args: callback args :param kwargs: callback kwargs :param key: component unique identifier - :return: selected segmented item value or index + :param color: alert color,support 'success', 'info', 'warning', 'error' and mantine color, hex and rgb color + :param background_color: alert background color,support mantine color, hex and rgb color + :param size: alert size,support mantine size and int in px + :param font: alert font,support mantine font and str + :return: selected segmented item value or index """ # register callback - register(key, on_change, args, kwargs) + u.register(key, on_change, args, kwargs) # parse items - items, kv = ParseItems(items, format_func).single(key_field='value') + items, kv = u.ParseItems(items, format_func).single(key_field='value') # component params - kw = update_kw(locals(), items=items) + kw = u.update_kw(locals(), items=items) # component default - default = get_default(index, return_index, kv) + default = u.get_default(index, return_index, kv) # pass component id and params to frontend - return component(id=get_func_name(), kw=kw, default=default, key=key) + return u.component(id=u.get_func_name(), kw=kw, default=default, key=key) diff --git a/streamlit_antd_components/widgets/steps.py b/streamlit_antd_components/widgets/steps.py index 386b6bd..f52b926 100644 --- a/streamlit_antd_components/widgets/steps.py +++ b/streamlit_antd_components/widgets/steps.py @@ -8,16 +8,19 @@ @Project : StreamlitAntdComponents @Software : PyCharm """ -from ..utils import * +from typing import List, Union, Literal, Callable, Tuple, Any, Dict + +import streamlit_antd_components.utils as u +from streamlit_antd_components.utils import MantineSize, MantineFont, MantineColor, StepsItem, Direction, Formatter + +MantineFont def steps( items: List[Union[str, dict, StepsItem]], index: int = 0, format_func: Union[Formatter, Callable] = None, - size: Union[MantineSize, int] = 'md', variant: Literal['default', 'navigation'] = 'default', - color: Union[MantineColor, str] = None, placement: Direction = 'horizontal', direction: Direction = 'horizontal', dot: bool = False, @@ -26,6 +29,11 @@ def steps( args: Tuple[Any, ...] = None, kwargs: Dict[str, Any] = None, key=None, + color: Union[MantineColor, str] = None, + background_color: Union[MantineColor, str] = None, + size: Union[MantineSize, int] = None, + font: Union[MantineFont, str] = None, + ) -> Union[str, int]: """antd design steps @@ -34,7 +42,6 @@ def steps( :param format_func: label formatter function,receive str and return str :param size: steps size,support mantine size and int in px :param variant: steps variant - :param color: steps color,default streamlit primary color,support built-in mantine color, hex and rgb color :param placement: item title placement :param direction: steps direction :param dot: dot style steps @@ -43,15 +50,19 @@ def steps( :param args: callback args :param kwargs: callback kwargs :param key: component key - :return: selected item title or index + :param color: alert color,support 'success', 'info', 'warning', 'error' and mantine color, hex and rgb color + :param background_color: alert background color,support mantine color, hex and rgb color + :param size: alert size,support mantine size and int in px + :param font: alert font,support mantine font and str + :return: selected item title or index """ # register callback - register(key, on_change, args, kwargs) + u.register(key, on_change, args, kwargs) # parse items - items, kv = ParseItems(items, format_func).single(label_field='title') + items, kv = u.ParseItems(items, format_func).single(label_field='title') # component params - kw = update_kw(locals(), items=items) + kw = u.update_kw(locals(), items=items) # component default - default = get_default(index, return_index, kv) + default = u.get_default(index, return_index, kv) # pass component id and params to frontend - return component(id=get_func_name(), kw=kw, default=default, key=key) + return u.component(id=u.get_func_name(), kw=kw, default=default, key=key) diff --git a/streamlit_antd_components/widgets/switch.py b/streamlit_antd_components/widgets/switch.py index 52dd2a0..537af65 100644 --- a/streamlit_antd_components/widgets/switch.py +++ b/streamlit_antd_components/widgets/switch.py @@ -8,8 +8,14 @@ @Project : StreamlitAntdComponents @Software : PyCharm """ -from ..utils import * from dataclasses import is_dataclass +from typing import Union, Callable, Tuple, Any, Dict + +import streamlit_antd_components.utils as u +from streamlit_antd_components.utils import MantineSize, MantineFont, MantineColor, Align, BsIcon, AntIcon, \ + MantinePosition + +MantineFont def switch( @@ -20,7 +26,6 @@ def switch( off_label: Union[str, BsIcon, AntIcon] = None, align: Align = 'start', position: MantinePosition = 'right', - size: MantineSize = 'sm', radius: Union[MantineSize, int] = 'lg', on_color: Union[MantineColor, str] = None, off_color: Union[MantineColor, str] = None, @@ -28,7 +33,12 @@ def switch( on_change: Callable = None, args: Tuple[Any, ...] = None, kwargs: Dict[str, Any] = None, - key=None + key=None, + color: Union[MantineColor, str] = None, + background_color: Union[MantineColor, str] = None, + size: Union[MantineSize, int] = None, + font: Union[MantineFont, str] = None, + ) -> bool: """mantine switch https://v6.mantine.dev/core/switch/ @@ -48,14 +58,18 @@ def switch( :param args: callback args :param kwargs: callback kwargs :param key: component unique identifier - :return: True when open,False when close + :param color: alert color,support 'success', 'info', 'warning', 'error' and mantine color, hex and rgb color + :param background_color: alert background color,support mantine color, hex and rgb color + :param size: alert size,support mantine size and int in px + :param font: alert font,support mantine font and str + :return: True when open,False when close """ # register callback - register(key, on_change, args, kwargs) + u.register(key, on_change, args, kwargs) # parse icon kw = dict(locals()) - kw.update(on_label=parse_icon(on_label) if is_dataclass(on_label) else on_label) - kw.update(off_label=parse_icon(off_label) if is_dataclass(off_label) else off_label) - kw = update_kw(kw) + kw.update(on_label=u.parse_icon(on_label) if is_dataclass(on_label) else on_label) + kw.update(off_label=u.parse_icon(off_label) if is_dataclass(off_label) else off_label) + kw = u.update_kw(kw) # pass component id and params to frontend - return component(id=get_func_name(), kw=kw, default=value, key=key) + return u.component(id=u.get_func_name(), kw=kw, default=value, key=key) diff --git a/streamlit_antd_components/widgets/tabs.py b/streamlit_antd_components/widgets/tabs.py index 52c575d..748ae37 100644 --- a/streamlit_antd_components/widgets/tabs.py +++ b/streamlit_antd_components/widgets/tabs.py @@ -8,7 +8,10 @@ @Project : StreamlitAntdComponents @Software : PyCharm """ -from ..utils import * +from typing import List, Union, Literal, Callable, Tuple, Any, Dict + +import streamlit_antd_components.utils as u +from streamlit_antd_components.utils import MantineSize, MantineFont, MantineColor, Align, Formatter, Position, TabsItem def tabs( @@ -17,16 +20,18 @@ def tabs( format_func: Union[Formatter, Callable] = None, align: Align = 'start', position: Position = 'top', - size: Union[MantineSize, int] = 'md', variant: Literal['default', 'outline'] = 'default', - color: Union[MantineColor, str] = None, height: int = None, use_container_width: bool = False, return_index: bool = False, on_change: Callable = None, args: Tuple[Any, ...] = None, kwargs: Dict[str, Any] = None, - key=None + key=None, + color: Union[MantineColor, str] = None, + background_color: Union[MantineColor, str] = None, + size: Union[MantineSize, int] = None, + font: Union[MantineFont, str] = None, ) -> Union[str, int]: """antd design tabs https://ant.design/components/tabs @@ -35,9 +40,7 @@ def tabs( :param format_func: label formatter function,receive str and return str :param align: tabs align,available when position in ['top','bottom'] :param position: tabs position - :param size: tabs size,support mantine size and int in px :param variant: tabs variant - :param color: tabs color,default streamlit primary color,support mantine color, hex and rgb color :param height: set height in px,available when position in ['right','left'] :param use_container_width: makes the tabs stretch its width to match the parent container,available when position in ['top','bottom'] :param return_index: if True,return tab index,default return label @@ -45,15 +48,19 @@ def tabs( :param args: callback args :param kwargs: callback kwargs :param key: component unique identifier + :param color: alert color,support 'success', 'info', 'warning', 'error' and mantine color, hex and rgb color + :param background_color: alert background color,support mantine color, hex and rgb color + :param size: alert size,support mantine size and int in px + :param font: alert font,support mantine font and str :return: selected tab label or index """ # register callback - register(key, on_change, args, kwargs) + u.register(key, on_change, args, kwargs) # parse items - items, kv = ParseItems(items, format_func).single() + items, kv = u.ParseItems(items, format_func).single() # component params - kw = update_kw(locals(), items=items) + kw = u.update_kw(locals(), items=items) # component default - default = get_default(index, return_index, kv) + default = u.get_default(index, return_index, kv) # pass component id and params to frontend - return component(id=get_func_name(), kw=kw, default=default, key=key) + return u.component(id=u.get_func_name(), kw=kw, default=default, key=key) diff --git a/streamlit_antd_components/widgets/tag.py b/streamlit_antd_components/widgets/tag.py index cc6ffb9..a97e456 100644 --- a/streamlit_antd_components/widgets/tag.py +++ b/streamlit_antd_components/widgets/tag.py @@ -8,7 +8,11 @@ @Project : StreamlitAntdComponents @Software : PyCharm """ -from ..utils import * +from typing import List, Union, Callable + +import streamlit_antd_components.utils as u +from streamlit_antd_components.utils import MantineSize, MantineFont, MantineColor, Align, Direction, \ + Formatter, Tag def tags( @@ -16,10 +20,13 @@ def tags( format_func: Union[Formatter, Callable] = None, align: Align = 'start', direction: Direction = 'horizontal', - size: Union[MantineSize, int] = 'sm', radius: Union[MantineSize, int] = 'md', - color: Union[Color, str] = None, - key=None + key=None, + color: Union[MantineColor, str] = None, + background_color: Union[MantineColor, str] = None, + size: Union[MantineSize, int] = None, + font: Union[MantineFont, str] = None, + ): """antd design tag https://ant.design/components/tag @@ -29,12 +36,15 @@ def tags( :param direction: tags direction :param size: tags size,support mantine size and int in px :param radius: tags radius,support mantine size and int in px - :param color: tags color,support ant color, hex and rgb color :param key: component unique identifier + :param color: alert color,support 'success', 'info', 'warning', 'error' and mantine color, hex and rgb color + :param background_color: alert background color,support mantine color, hex and rgb color + :param size: alert size,support mantine size and int in px + :param font: alert font,support mantine font and str """ # parse items - items, kv = ParseItems(items, format_func).single() + items, kv = u.ParseItems(items, format_func).single() # component params - kw = update_kw(locals(), items=items) + kw = u.update_kw(locals(), items=items) # pass component id and params to frontend - return component(id=get_func_name(), kw=kw, default=[], key=key) + return u.component(id=u.get_func_name(), kw=kw, default=[], key=key) diff --git a/streamlit_antd_components/widgets/theme.py b/streamlit_antd_components/widgets/theme.py new file mode 100644 index 0000000..2363f08 --- /dev/null +++ b/streamlit_antd_components/widgets/theme.py @@ -0,0 +1,34 @@ +#!/usr/bin/env python +# _*_coding:utf-8_*_ + +""" +@Time : 2023/6/6 16:50 +@Author : ji hao ran +@File : tree.py +@Project : StreamlitAntdComponents +@Software : PyCharm +""" +from typing import Union, List + +import streamlit_antd_components as sac +from streamlit_antd_components.utils import MantineSize, MantineColor, MantineFont + + +def theme( + color: Union[MantineColor, str] = None, + background_color: Union[MantineColor, str] = None, + size: Union[MantineSize, int] = None, + font: Union[MantineFont, str] = None, +) -> List[Union[str, int]]: + """antd theme. + + :param color: alert color,support 'success', 'info', 'warning', 'error' and mantine color, hex and rgb color + :param background_color: alert background color,support mantine color, hex and rgb color + :param size: alert size,support mantine size and int in px + :param font: alert font,support mantine font and str + """ + sac._theme = dict(color=color, background_color=background_color, size=size, font=font) + + +if not hasattr(sac, '_theme'): + theme() diff --git a/streamlit_antd_components/widgets/transfer.py b/streamlit_antd_components/widgets/transfer.py index 911c19b..613b45d 100644 --- a/streamlit_antd_components/widgets/transfer.py +++ b/streamlit_antd_components/widgets/transfer.py @@ -8,7 +8,11 @@ @Project : StreamlitAntdComponents @Software : PyCharm """ -from ..utils import * +from typing import List, Union, Callable, Tuple, Any, Dict + +import streamlit_antd_components.utils as u +from streamlit_antd_components.utils import MantineSize, MantineColor, Align, Formatter, \ + MantineFont def transfer( @@ -19,7 +23,6 @@ def transfer( description: str = None, titles: List[str] = None, align: Align = 'start', - color: Union[MantineColor, str] = None, search: bool = False, pagination: bool = False, oneway: bool = False, @@ -32,7 +35,12 @@ def transfer( on_change: Callable = None, args: Tuple[Any, ...] = None, kwargs: Dict[str, Any] = None, - key=None + key=None, + color: Union[MantineColor, str] = None, + background_color: Union[MantineColor, str] = None, + size: Union[MantineSize, int] = None, + font: Union[MantineFont, str] = None, + ) -> List[Union[str, int]]: """antd design transfer https://ant.design/components/transfer @@ -43,7 +51,6 @@ def transfer( :param description: transfer description,support str and markdown str :param titles: transfer left and right box title,[left,right] :param align: transfer align - :param color: transfer color,default streamlit primary color,support mantine color, hex and rgb color :param search: show search bar :param pagination: show pagination :param oneway: oneway mode @@ -57,15 +64,19 @@ def transfer( :param args: callback args :param kwargs: callback kwargs :param key: component unique identifier - :return: selected transfer label or index + :param color: alert color,support 'success', 'info', 'warning', 'error' and mantine color, hex and rgb color + :param background_color: alert background color,support mantine color, hex and rgb color + :param size: alert size,support mantine size and int in px + :param font: alert font,support mantine font and str + :return: selected transfer label or index """ # register callback - register(key, on_change, args, kwargs) + u.register(key, on_change, args, kwargs) # parse items - items, kv = ParseItems(items, format_func).transfer() + items, kv = u.ParseItems(items, format_func).transfer() # component params - kw = update_kw(locals(), items=items) + kw = u.update_kw(locals(), items=items) # component default - default = get_default(index, return_index, kv) + default = u.get_default(index, return_index, kv) # pass component id and params to frontend - return component(id=get_func_name(), kw=kw, default=default, key=key) + return u.component(id=u.get_func_name(), kw=kw, default=default, key=key) diff --git a/streamlit_antd_components/widgets/tree.py b/streamlit_antd_components/widgets/tree.py index 1b68011..a262cae 100644 --- a/streamlit_antd_components/widgets/tree.py +++ b/streamlit_antd_components/widgets/tree.py @@ -9,7 +9,11 @@ @Software : PyCharm """ -from ..utils import * +from typing import List, Union, Callable, Tuple, Any, Dict + +import streamlit_antd_components.utils as u +from streamlit_antd_components.utils import MantineSize, MantineFont, MantineColor, Align, Formatter, BsIcon, \ + AntIcon, TreeItem def tree( @@ -20,8 +24,6 @@ def tree( description: str = None, icon: Union[str, BsIcon, AntIcon] = None, align: Align = 'start', - size: Union[MantineSize, int] = 'sm', - color: Union[MantineColor, str] = None, width: int = None, height: int = None, open_index: List[int] = None, @@ -33,7 +35,11 @@ def tree( on_change: Callable = None, args: Tuple[Any, ...] = None, kwargs: Dict[str, Any] = None, - key=None + key=None, + color: Union[MantineColor, str] = None, + background_color: Union[MantineColor, str] = None, + size: Union[MantineSize, int] = None, + font: Union[MantineFont, str] = None, ) -> List[Union[str, int]]: """antd design tree https://ant.design/components/tree @@ -45,7 +51,6 @@ def tree( :param icon: tree item icon :param align: tree align :param size: tree size,support mantine size and int in px - :param color: tree color,default streamlit primary color,support mantine color, hex and rgb color :param width: tree width :param height: tree height :param open_index: default opened indexes.if none,tree will open default index's parent nodes. @@ -58,14 +63,18 @@ def tree( :param args: callback args :param kwargs: callback kwargs :param key: component unique identifier - :return: list of selected item label or index + :param color: alert color,support 'success', 'info', 'warning', 'error' and mantine color, hex and rgb color + :param background_color: alert background color,support mantine color, hex and rgb color + :param size: alert size,support mantine size and int in px + :param font: alert font,support mantine font and str + :return: list of selected item label or index """ if isinstance(index, list) and len(index) > 1 and not checkbox: raise ValueError(f'length of index ({len(index)}) should =1 when checkbox=False') # register callback - register(key, on_change, args, kwargs) + u.register(key, on_change, args, kwargs) # parse items - items, kv = ParseItems(items, format_func).multi() + items, kv = u.ParseItems(items, format_func).multi() # parse index if index is None and checkbox: index = [] @@ -74,8 +83,8 @@ def tree( if isinstance(index, list) and not checkbox: index = index[0] # component params - kw = update_kw(locals(), items=items, icon=parse_icon(icon)) + kw = u.update_kw(locals(), items=items, icon=u.parse_icon(icon)) # component default - default = get_default(index, return_index, kv) + default = u.get_default(index, return_index, kv) # pass component id and params to frontend - return component(id=get_func_name(), kw=kw, default=default, key=key) + return u.component(id=u.get_func_name(), kw=kw, default=default, key=key)