add new <HorizontalScrollContent /> and fixed some components

xizon · Dec 21, 2023 · e1fa670 · e1fa670
1 parent 8d15d34
commit e1fa670
Show file tree

Hide file tree

Showing 27 changed files with 3,863 additions and 115 deletions.
diff --git a/README.md b/README.md
@@ -31,7 +31,7 @@ Here is a table of the components and their status.
 | [Content Placeholder ❏](packages/ContentPlaceholder/README.md) | [Select ✅](packages/Select/README.md) | [Sticky Elements ❏](packages/StickyElements/README.md) |  |
 | [Counter ❏](packages/Counter/README.md) | [Cascading Select ✅](packages/CascadingSelect/README.md) | [Mode Switch ✅](packages/ModeSwitch/README.md) |  |
 | [Hybrid Content Slider ❏](packages/HybridContentSlider/README.md) | [Cascading Select End-to-end ✅🔥](packages/CascadingSelectE2E/README.md) | [Custom Scrollbar ✅](packages/Scrollbar/README.md) |  |
-| [Image Shapes ❏](packages/ImageShapes/README.md) | [Radio ✅](packages/Radio/README.md) |  |  |
+| [Image Shapes ❏](packages/ImageShapes/README.md) | [Radio ✅](packages/Radio/README.md) | [Horizontal Scroll Content ✅](packages/HorizontalScrollContent/README.md) |  |
 | [Lightbox ❏](packages/Lightbox/README.md) | [Checkbox ✅](packages/Checkbox/README.md) |  |  |
 | [List Bulleted ❏](packages/ListBulleted/README.md) | [Multifunction Select ✅🔥](packages/MultiFuncSelect/README.md) |  |  |
 | [Modal Dialog ✅🔥](packages/ModalDialog/README.md) | [LiveSearch ✅](packages/LiveSearch/README.md) |  |  |

diff --git a/README_PUBLISH.md b/README_PUBLISH.md
@@ -33,7 +33,7 @@ Here is a table of the components and their status.
 | [Content Placeholder ❏](packages/ContentPlaceholder/README.md) | [Select ✅](packages/Select/README.md) | [Sticky Elements ❏](packages/StickyElements/README.md) |  |
 | [Counter ❏](packages/Counter/README.md) | [Cascading Select ✅](packages/CascadingSelect/README.md) | [Mode Switch ✅](packages/ModeSwitch/README.md) |  |
 | [Hybrid Content Slider ❏](packages/HybridContentSlider/README.md) | [Cascading Select End-to-end ✅🔥](packages/CascadingSelectE2E/README.md) | [Custom Scrollbar ✅](packages/Scrollbar/README.md) |  |
-| [Image Shapes ❏](packages/ImageShapes/README.md) | [Radio ✅](packages/Radio/README.md) |  |  |
+| [Image Shapes ❏](packages/ImageShapes/README.md) | [Radio ✅](packages/Radio/README.md) | [Horizontal Scroll Content ✅](packages/HorizontalScrollContent/README.md) |  |
 | [Lightbox ❏](packages/Lightbox/README.md) | [Checkbox ✅](packages/Checkbox/README.md) |  |  |
 | [List Bulleted ❏](packages/ListBulleted/README.md) | [Multifunction Select ✅🔥](packages/MultiFuncSelect/README.md) |  |  |
 | [Modal Dialog ✅🔥](packages/ModalDialog/README.md) | [LiveSearch ✅](packages/LiveSearch/README.md) |  |  |
@@ -57,7 +57,6 @@ Here is a table of the components and their status.
 
 
 
-
 ## Usage
 
 First, you need to install it:

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -2,7 +2,7 @@
     "author": "UIUX Lab",
     "email": "[email protected]",
     "name": "funda-ui",
-    "version": "1.1.122",
+    "version": "1.1.132",
     "description": "React components using pure Bootstrap 5+ which does not contain any external style and script libraries.",
     "repository": {
         "type": "git",

diff --git a/packages/HorizontalScrollContent/README.md b/packages/HorizontalScrollContent/README.md
@@ -0,0 +1,62 @@
+# Horizontal Scroll Content
+
+
+## API
+
+### Horizontal Scroll Content
+```js
+import HorizontalScrollContent from 'funda-ui/HorizontalScrollContent';
+```
+| Property | Type | Default | Description |
+| --- | --- | --- | --- |
+| `data` | React.ReactNode[]  | - | Set a default value |
+| `contentWrapperClassName` | string | - | The class name of the content wrapper. for `<ul>` |
+| `itemClassName` | string | - | The class name of each item. for `<li>` |
+| `btnClassName` | string | - | The class name of button. for `<button>` |
+| `slideOffset` | number  | 50 | The speed of horizontal line scrolling, the value is one pixel length. |
+| `arrowIcons` | React.ReactNode[] | `[<><svg width="15px" height="15px" viewBox="0 0 24 24" fill="inherit" transform="translate(0 -2)"> <path d="M14.2893 5.70708C13.8988 5.31655 13.2657 5.31655 12.8751 5.70708L7.98768 10.5993C7.20729 11.3805 7.2076 12.6463 7.98837 13.427L12.8787 18.3174C13.2693 18.7079 13.9024 18.7079 14.293 18.3174C14.6835 17.9269 14.6835 17.2937 14.293 16.9032L10.1073 12.7175C9.71678 12.327 9.71678 11.6939 10.1073 11.3033L14.2893 7.12129C14.6799 6.73077 14.6799 6.0976 14.2893 5.70708Z" /> </svg></>,<><svg width="15px" height="15px" viewBox="0 0 24 24" fill="inherit" transform="translate(0 -2)"> <path d="M9.71069 18.2929C10.1012 18.6834 10.7344 18.6834 11.1249 18.2929L16.0123 13.4006C16.7927 12.6195 16.7924 11.3537 16.0117 10.5729L11.1213 5.68254C10.7308 5.29202 10.0976 5.29202 9.70708 5.68254C9.31655 6.07307 9.31655 6.70623 9.70708 7.09676L13.8927 11.2824C14.2833 11.6729 14.2833 12.3061 13.8927 12.6966L9.71069 16.8787C9.32016 17.2692 9.32016 17.9023 9.71069 18.2929Z" /> </svg></>]` | Set left/right icon. Use an array to set four icons. |
+| `onMove` | function  | - | Call a function when an form field gets focus. It returns two callback values. <br /> <ol><li>The one is the direction in which the content moves, the value is `-1` or `1` (**Number**)</li><li>The second parameter is content wrapper width (**Number**)</li><li>The third parameter is the actual content width (**Number**)</li><li>The last is displacement offset (**Number**).</li></ol> |
+
+
+
+## Examples
+
+```js
+import React from "react";
+import HorizontalScrollContent from 'funda-ui/HorizontalScrollContent';
+
+// component styles
+import 'funda-ui/HorizontalScrollContent/index.css';
+
+const data = [
+    <><span>apple</span></>,
+    <><span>apricot</span></>,
+    <><span>avocado</span></>,
+    <><span>banana</span></>,
+    <><span>bell pepper</span></>,
+    <><span>blackberry</span></>,
+    <><span>bilberry</span></>,
+    <><span>black currant</span></>,
+    <><span>coconut</span></>,
+    <><span>cranberry</span></>
+];
+
+
+export default () => {
+
+    return (
+        <>
+
+            <HorizontalScrollContent 
+                data={data}
+                slideOffset={50}
+                onMove={(dir: number, wrapperWidth: number, realContentWidth: number, moveOffset: number) => {
+                    console.log({ dir, wrapperWidth, realContentWidth, moveOffset });
+                }}
+            />
+
+
+        </>
+    );
+}
+```
diff --git a/packages/HorizontalScrollContent/babel.config.js b/packages/HorizontalScrollContent/babel.config.js
@@ -0,0 +1,10 @@
+module.exports = {
+  "presets": [
+    ["@babel/preset-env",{"targets": {"node": "current"}}],
+    ["@babel/preset-typescript"],
+    ["@babel/preset-react"]
+  ],
+  "plugins": [
+    ["@babel/plugin-proposal-class-properties"]
+  ]
+};
diff --git a/packages/HorizontalScrollContent/build/config-cjs.js b/packages/HorizontalScrollContent/build/config-cjs.js
@@ -0,0 +1,98 @@
+const path = require('path');
+
+module.exports = {
+    resolve: {
+        fallback: {
+            fs: false
+        },
+        extensions: ['.js', '.jsx', '.ts', '.tsx', '.scss', '.sass']
+    },
+
+    optimization: {
+        minimize: false
+    },
+
+    //Exclude react from bundle
+    externals: {
+        'react': {
+            root: 'React',
+            commonjs2: 'react',
+            commonjs: 'react',
+            amd: 'react',
+        },
+        'react-dom': {
+            root: 'ReactDOM',
+            commonjs2: 'react-dom',
+            commonjs: 'react-dom',
+            amd: 'react-dom',
+        },
+    },
+
+    entry: {
+        'index': './src/index.tsx'
+    },
+
+    output: {
+        globalObject: 'this',
+        library: "RPB",
+        libraryTarget: "umd",
+        filename: '[name].js',
+        path: path.resolve(__dirname, '../dist/cjs')
+    },
+
+    module: {
+        rules: [
+            {
+                test: /\.(js|jsx|ts|tsx)$/,
+                loader: 'babel-loader',
+                exclude: path.resolve(__dirname, '../node_modules'),
+                options: {
+                    'presets': [
+                        '@babel/preset-env',
+                        '@babel/preset-react',
+                        '@babel/preset-typescript',
+                        {
+                            plugins: [
+                                '@babel/plugin-proposal-class-properties'
+                            ]
+                        }
+                    ]
+                }
+            },
+			{
+
+				test: /\.(sa|sc|c)ss$/,
+				exclude: path.resolve(__dirname, '../node_modules'),
+				use: [
+                    // Creates `style` nodes from JS strings
+                    "style-loader",
+					{
+						loader: "css-loader",  // interprets @import and url() and will resolve them. ( Step 2 )
+						options: {
+							sourceMap: true
+						}
+					},
+					{
+						loader: 'sass-loader', // compiles Sass to CSS ( Step 1 )
+						options: {
+                            implementation: require("sass"),
+                            sourceMap: true,
+                            /* (nested | expanded | compact | compressed) */
+                            sassOptions: {
+                                outputStyle: 'expanded',
+                            },
+						}
+
+					},
+				]
+			}
+
+
+        ],
+
+
+
+    },
+    //devtool: 'source-map',
+};
+
diff --git a/packages/HorizontalScrollContent/build/config-esm.js b/packages/HorizontalScrollContent/build/config-esm.js
@@ -0,0 +1,23 @@
+const path = require('path');
+const fs = require('fs');
+
+
+const copyRecursiveSync = (src, dest) => {
+    const exists = fs.existsSync(src);
+    const stats = exists && fs.statSync(src);
+    const isDirectory = exists && stats.isDirectory();
+    if (isDirectory) {
+        fs.mkdirSync(dest, { recursive: true });
+        fs.readdirSync(src).forEach(function (childItemName) {
+            copyRecursiveSync(path.join(src, childItemName),
+                path.join(dest, childItemName));
+        });
+    } else {
+        fs.copyFileSync(src, dest);
+    }
+};
+
+const oPath = path.resolve(__dirname, '../src/');
+const targetPath = path.resolve(__dirname, '../dist/esm');
+copyRecursiveSync(oPath, targetPath);
+console.log('\x1b[36m%s\x1b[0m', `--> Copied "src/*" to "dist/esm/*" successfully`);
diff --git a/packages/HorizontalScrollContent/build/types.js b/packages/HorizontalScrollContent/build/types.js
@@ -0,0 +1,11 @@
+const fs = require('fs');
+const path = require('path');
+
+const typesFilePath = path.resolve(__dirname, '../@types/index.d.ts');
+const typesTargetPath = path.resolve(__dirname, '../dist/cjs/index.d.ts');
+if (fs.existsSync(typesFilePath)) {
+    fs.copyFileSync(typesFilePath, typesTargetPath);
+    fs.rmSync(path.resolve(__dirname, '../@types'), { recursive: true });
+    console.log('\x1b[36m%s\x1b[0m', `--> Deleted "@types" successfully`);
+    console.log('\x1b[36m%s\x1b[0m', `--> Copied "dist/cjs/index.d.ts" successfully`);
+}
diff --git a/packages/HorizontalScrollContent/dist/cjs/index.d.ts b/packages/HorizontalScrollContent/dist/cjs/index.d.ts
@@ -0,0 +1,14 @@
+import React from 'react';
+declare type HorizontalScrollContentProps = {
+    slideOffset?: number;
+    data?: React.ReactNode[];
+    arrowIcons?: React.ReactNode[];
+    contentWrapperClassName?: string;
+    itemClassName?: string;
+    btnClassName?: string;
+    onMove?: (dir: number, wrapperWidth: number, realContentWidth: number, moveOffset: number) => void;
+    /** -- */
+    id?: string;
+};
+declare const HorizontalScrollContent: (props: HorizontalScrollContentProps) => JSX.Element;
+export default HorizontalScrollContent;