From b43c0f490f83dc0e3929f2dd1492087ac153582f Mon Sep 17 00:00:00 2001 From: Georg Malahov Date: Tue, 28 Nov 2023 20:07:27 +0100 Subject: [PATCH 1/2] [antd5] add Skeleton component --- plasmicpkgs/antd5/src/registerSkeleton.tsx | 140 +++++++++++++++++++++ 1 file changed, 140 insertions(+) create mode 100644 plasmicpkgs/antd5/src/registerSkeleton.tsx diff --git a/plasmicpkgs/antd5/src/registerSkeleton.tsx b/plasmicpkgs/antd5/src/registerSkeleton.tsx new file mode 100644 index 00000000000..9a3a0984232 --- /dev/null +++ b/plasmicpkgs/antd5/src/registerSkeleton.tsx @@ -0,0 +1,140 @@ +import { Skeleton, SkeletonProps } from "antd"; +import React from "react"; +import { Registerable, registerComponentHelper } from "./utils"; + +export type AntdSkeletonProps = SkeletonProps & { + type?: "Basic" | "Button" | "Avatar" | "Input" | "Image" | "Node"; +}; + +export function AntdSkeleton(props: AntdSkeletonProps) { + const { type, loading, children } = props; + + if (type === "Button") { + return loading ? : children; + } + + if (type === "Avatar") { + return loading ? : children; + } + + if (type === "Input") { + return loading ? : children; + } + + if (type === "Image") { + return loading ? : children; + } + + if (type === "Node") { + return ; + } + + return ; +} + +export const skeletonComponentName = "plasmic-antd5-skeleton"; + +export function registerSkeleton(loader?: Registerable) { + registerComponentHelper(loader, AntdSkeleton, { + name: skeletonComponentName, + displayName: "Skeleton", + props: { + children: "slot", + type: { + type: "choice", + defaultValueHint: "Basic", + options: ["Basic", "Button","Avatar", "Input", "Image", "Node"], + }, + active: { + type: "boolean", + description: "Show animation effect", + hidden: (ps) => ps.type !== "Basic" && ps.type !== "Button" && ps.type !== "Avatar" && ps.type !== "Input", + defaultValueHint: false, + }, + avatar: { + type: "boolean", + description: "Show avatar placeholder", + hidden: (ps) => ps.type !== "Basic", + defaultValueHint: false, + }, + loading: { + type: "boolean", + description: "Display the skeleton when true", + defaultValueHint: false, + }, + paragraph: { + type: "boolean", + description: "Show paragraph placeholder", + hidden: (ps) => ps.type !== "Basic", + defaultValueHint: true, + }, + round: { + type: "boolean", + description: "Show paragraph and title radius when true", + hidden: (ps) => ps.type !== "Basic", + defaultValueHint: false, + }, + title: { + type: "boolean", + description: "Show title placeholder", + hidden: (ps) => ps.type !== "Basic", + defaultValueHint: true, + }, + size: { + type: "choice", + defaultValueHint: "default", + description: `Size of the skeleton for types: Avatar, Button and Input`, + hidden: (ps) => ps.type !== "Avatar" && ps.type !== "Button" && ps.type !== "Input" && ps.avatar !== true, + advanced: true, + options: ["large", "small", "default"], + }, + // SkeletonAvatarProps + shape: { + type: "choice", + defaultValueHint: "circle", + description: `Set the shape of avatar`, + hidden: (ps) => ps.type !== "Avatar" && ps.avatar !== true, + advanced: true, + options: ["circle", "square"], + }, + // SkeletonTitleProps + widthTitle: { + type: "string", + description: "Width of the title", + hidden: (ps) => !ps.title, + advanced: true, + }, + // SkeletonParagraphProps + width: { + type: "array", + description: "Set the width of paragraph. When width is an Array, it can set the width of each row. Otherwise only set the last row width", + hidden: (ps) => !ps.paragraph && ps.type !== "Basic", + advanced: true, + }, + rows: { + type: "number", + description: "Set the row count of paragraph", + hidden: (ps) => !ps.paragraph && ps.type !== "Basic", + advanced: true, + }, + // SkeletonButtonProps + shapeButton: { + type: "choice", + defaultValueHint: "default", + description: `Set the shape of button`, + hidden: (ps) => ps.type !== "Button", + advanced: true, + options: ["default", "circle", "round", "square"], + }, + block: { + type: "boolean", + description: "Option to fit button width to its parent width", + hidden: (ps) => ps.type !== "Button", + defaultValueHint: false, + advanced: true, + }, + }, + importPath: "@plasmicpkgs/antd5/skinny/registerSkeleton", + importName: "AntdSkeleton", + }); +} From 9ca431b390a25015b6c99ea88bc9b5e1fff6f485 Mon Sep 17 00:00:00 2001 From: Georg Malahov Date: Tue, 19 Dec 2023 18:03:56 +0100 Subject: [PATCH 2/2] fix: extend properties configuration --- plasmicpkgs/antd5/src/registerSkeleton.tsx | 210 ++++++++++++++------- 1 file changed, 143 insertions(+), 67 deletions(-) diff --git a/plasmicpkgs/antd5/src/registerSkeleton.tsx b/plasmicpkgs/antd5/src/registerSkeleton.tsx index 9a3a0984232..264eb9062a5 100644 --- a/plasmicpkgs/antd5/src/registerSkeleton.tsx +++ b/plasmicpkgs/antd5/src/registerSkeleton.tsx @@ -3,33 +3,100 @@ import React from "react"; import { Registerable, registerComponentHelper } from "./utils"; export type AntdSkeletonProps = SkeletonProps & { - type?: "Basic" | "Button" | "Avatar" | "Input" | "Image" | "Node"; -}; + type?: 'Basic' | 'Button' | 'Avatar' | 'Input' | 'Image' | 'Node' + width?: string | number | (string | number)[] + widthTitle?: string + rows?: number + shape?: 'circle' | 'square' + size?: 'large' | 'small' | 'default' + customClassName?: string +} export function AntdSkeleton(props: AntdSkeletonProps) { - const { type, loading, children } = props; - - if (type === "Button") { - return loading ? : children; + const { + type, + paragraph, + avatar, + title, + shape, + size, + loading, + width, + widthTitle, + rows, + className: rootClassName, + customClassName, + children, + } = props + + if (type === 'Button') { + return loading ? ( + + ) : ( + children + ) } - if (type === "Avatar") { - return loading ? : children; + if (type === 'Avatar') { + return loading ? ( + + ) : ( + children + ) } - if (type === "Input") { - return loading ? : children; + if (type === 'Input') { + return loading ? ( + + ) : ( + children + ) } - if (type === "Image") { - return loading ? : children; + if (type === 'Image') { + return loading ? ( + + ) : ( + children + ) } - if (type === "Node") { - return ; + if (type === 'Node') { + return ( + + ) } - return ; + return ( + + ) } export const skeletonComponentName = "plasmic-antd5-skeleton"; @@ -37,102 +104,111 @@ export const skeletonComponentName = "plasmic-antd5-skeleton"; export function registerSkeleton(loader?: Registerable) { registerComponentHelper(loader, AntdSkeleton, { name: skeletonComponentName, - displayName: "Skeleton", + displayName: 'Skeleton', props: { - children: "slot", + children: 'slot', type: { - type: "choice", - defaultValueHint: "Basic", - options: ["Basic", "Button","Avatar", "Input", "Image", "Node"], + type: 'choice', + defaultValue: 'Basic', + options: ['Basic', 'Button', 'Avatar', 'Input', 'Image', 'Node'], }, active: { - type: "boolean", - description: "Show animation effect", - hidden: (ps) => ps.type !== "Basic" && ps.type !== "Button" && ps.type !== "Avatar" && ps.type !== "Input", - defaultValueHint: false, + type: 'boolean', + description: 'Show animation effect', + defaultValue: false, }, avatar: { - type: "boolean", - description: "Show avatar placeholder", - hidden: (ps) => ps.type !== "Basic", - defaultValueHint: false, + type: 'boolean', + description: 'Show avatar placeholder', + hidden: (ps) => ps.type !== 'Basic', + defaultValue: false, }, loading: { - type: "boolean", - description: "Display the skeleton when true", - defaultValueHint: false, + type: 'boolean', + description: 'Display the skeleton when true', + defaultValue: false, }, paragraph: { - type: "boolean", - description: "Show paragraph placeholder", - hidden: (ps) => ps.type !== "Basic", - defaultValueHint: true, + type: 'boolean', + description: 'Show paragraph placeholder', + hidden: (ps) => ps.type !== 'Basic', + defaultValue: true, }, round: { - type: "boolean", - description: "Show paragraph and title radius when true", - hidden: (ps) => ps.type !== "Basic", - defaultValueHint: false, + type: 'boolean', + description: 'Show paragraph and title radius when true', + hidden: (ps) => ps.type !== 'Basic', + defaultValue: false, }, title: { - type: "boolean", - description: "Show title placeholder", - hidden: (ps) => ps.type !== "Basic", - defaultValueHint: true, + type: 'boolean', + description: 'Show title placeholder', + hidden: (ps) => ps.type !== 'Basic', + defaultValue: true, }, size: { - type: "choice", - defaultValueHint: "default", + type: 'choice', + defaultValue: 'default', description: `Size of the skeleton for types: Avatar, Button and Input`, - hidden: (ps) => ps.type !== "Avatar" && ps.type !== "Button" && ps.type !== "Input" && ps.avatar !== true, + hidden: (ps) => + ps.type !== 'Avatar' && + ps.type !== 'Button' && + ps.type !== 'Input' && + ps.avatar !== true, advanced: true, - options: ["large", "small", "default"], + options: ['large', 'small', 'default'], }, // SkeletonAvatarProps shape: { - type: "choice", - defaultValueHint: "circle", + type: 'choice', + defaultValue: 'circle', description: `Set the shape of avatar`, - hidden: (ps) => ps.type !== "Avatar" && ps.avatar !== true, + hidden: (ps) => ps.type !== 'Avatar' && ps.avatar !== true, advanced: true, - options: ["circle", "square"], + options: ['circle', 'square'], }, // SkeletonTitleProps widthTitle: { - type: "string", - description: "Width of the title", + type: 'string', + description: 'Width of the title', hidden: (ps) => !ps.title, advanced: true, }, // SkeletonParagraphProps width: { - type: "array", - description: "Set the width of paragraph. When width is an Array, it can set the width of each row. Otherwise only set the last row width", - hidden: (ps) => !ps.paragraph && ps.type !== "Basic", + type: 'array', + description: + 'Set the width of paragraph. When width is an Array, it can set the width of each row. Otherwise only set the last row width', + hidden: (ps) => !ps.paragraph && ps.type !== 'Basic', advanced: true, }, rows: { - type: "number", - description: "Set the row count of paragraph", - hidden: (ps) => !ps.paragraph && ps.type !== "Basic", + type: 'number', + description: 'Set the row count of paragraph', + hidden: (ps) => !ps.paragraph && ps.type !== 'Basic', advanced: true, }, // SkeletonButtonProps shapeButton: { - type: "choice", - defaultValueHint: "default", + type: 'choice', + defaultValue: 'default', description: `Set the shape of button`, - hidden: (ps) => ps.type !== "Button", + hidden: (ps) => ps.type !== 'Button', advanced: true, - options: ["default", "circle", "round", "square"], + options: ['default', 'circle', 'round', 'square'], }, block: { - type: "boolean", - description: "Option to fit button width to its parent width", - hidden: (ps) => ps.type !== "Button", - defaultValueHint: false, + type: 'boolean', + description: 'Option to fit button width to its parent width', + hidden: (ps) => ps.type !== 'Button' && ps.type !== 'Input', + defaultValue: false, advanced: true, }, + customClassName: { + type: 'string', + displayName: 'Class Name', + description: 'Custom class name for Node skeleton for custom styling', + }, }, importPath: "@plasmicpkgs/antd5/skinny/registerSkeleton", importName: "AntdSkeleton",