[ { "path": ".codesandbox/tasks.json", "content": "{\n // These tasks will run in order when initializing your CodeSandbox project.\n \"setupTasks\": [\n {\n \"name\": \"Install Dependencies\",\n \"command\": \"pnpm install\"\n }\n ],\n\n // These tasks can be run from CodeSandbox. Running one will open a log in the app.\n \"tasks\": {\n \"dev\": {\n \"name\": \"dev\",\n \"command\": \"pnpm run dev\",\n \"runAtStart\": true\n },\n \"build\": {\n \"name\": \"build\",\n \"command\": \"pnpm run build\",\n \"runAtStart\": false\n },\n \"build:docs\": {\n \"name\": \"build:docs\",\n \"command\": \"pnpm run build:docs\",\n \"runAtStart\": false\n },\n \"test\": {\n \"name\": \"test\",\n \"command\": \"pnpm run test\",\n \"runAtStart\": false\n },\n \"test:unit\": {\n \"name\": \"test:unit\",\n \"command\": \"pnpm run test:unit\",\n \"runAtStart\": false\n },\n \"test:unit:web\": {\n \"name\": \"test:unit:web\",\n \"command\": \"pnpm run test:unit:web\",\n \"runAtStart\": false\n },\n \"test:unit:native\": {\n \"name\": \"test:unit:native\",\n \"command\": \"pnpm run test:unit:native\",\n \"runAtStart\": false\n },\n \"test:watch\": {\n \"name\": \"test:watch\",\n \"command\": \"pnpm run test:watch\",\n \"runAtStart\": false\n },\n \"test:tsc\": {\n \"name\": \"test:tsc\",\n \"command\": \"pnpm run test:tsc\",\n \"runAtStart\": false\n },\n \"test:tsc:watch\": {\n \"name\": \"test:tsc:watch\",\n \"command\": \"pnpm run test:tsc:watch\",\n \"runAtStart\": false\n },\n \"commit\": {\n \"name\": \"commit\",\n \"command\": \"pnpm run commit\",\n \"runAtStart\": false\n },\n \"format\": {\n \"name\": \"format\",\n \"command\": \"pnpm run format\",\n \"runAtStart\": false\n },\n \"release\": {\n \"name\": \"release\",\n \"command\": \"pnpm run release\",\n \"runAtStart\": false\n }\n }\n}\n" }, { "path": ".devcontainer/devcontainer.json", "content": "// For format details, see https://aka.ms/devcontainer.json. For config options, see the\n// README at: https://github.com/devcontainers/templates/tree/main/src/typescript-node\n{\n\t\"name\": \"Node.js & TypeScript\",\n\t// Or use a Dockerfile or Docker Compose file. More info: https://containers.dev/guide/dockerfile\n\t\"image\": \"mcr.microsoft.com/devcontainers/typescript-node:1-20-bullseye\"\n\n\t// Features to add to the dev container. More info: https://containers.dev/features.\n\t// \"features\": {},\n\n\t// Use 'forwardPorts' to make a list of ports inside the container available locally.\n\t// \"forwardPorts\": [],\n\n\t// Use 'postCreateCommand' to run commands after the container is created.\n\t// \"postCreateCommand\": \"yarn install\",\n\n\t// Configure tool-specific properties.\n\t// \"customizations\": {},\n\n\t// Uncomment to connect as root instead. More info: https://aka.ms/dev-containers-non-root.\n\t// \"remoteUser\": \"root\"\n}\n" }, { "path": ".github/FUNDING.yml", "content": "# These are supported funding model platforms\n\ngithub: [danilowoz]\npatreon: # Replace with a single Patreon username\nopen_collective: # Replace with a single Open Collective username\nko_fi: # Replace with a single Ko-fi username\ntidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel\ncommunity_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry\nliberapay: # Replace with a single Liberapay username\nissuehunt: # Replace with a single IssueHunt username\notechie: # Replace with a single Otechie username\ncustom: # Replace with up to 4 custom sponsorship URLs e.g., ['link1', 'link2']\n" }, { "path": ".github/ISSUE_TEMPLATE.md", "content": "## What did you do? \nPlease include the actual source code causing the issue.\n\n## What did you expect to happen?\nPlease mention the expected behaviour.\n\n## What happened actually?\n\n### Which versions of react-content-loader, and which browser are affected by this issue?\nPlease also mention the version of react.\n" }, { "path": ".github/PULL_REQUEST_TEMPLATE.md", "content": "## Summary\nIn this section, you should give the overview of the problem and the proposed changes.\n\n## Related Issue #[issue number]\nIf this PR is fixing any issue, then please include - Related Issue #[issue number]\n\n## Any Breaking Changes\nIf this PR is introducing any breaking changes then mention them in this section.\n\n## Checklist\n- [] Are all the test cases passing?\n- [] If any new feature has been added, then are the test cases updated/added?\n- [] Has the documentation been updated for the proposed change, if required?" }, { "path": ".github/dependabot.yml", "content": "# To get started with Dependabot version updates, you'll need to specify which\n# package ecosystems to update and where the package manifests are located.\n# Please see the documentation for more information:\n# https://docs.github.com/github/administering-a-repository/configuration-options-for-dependency-updates\n# https://containers.dev/guide/dependabot\n\nversion: 2\nupdates:\n - package-ecosystem: \"devcontainers\"\n directory: \"/\"\n schedule:\n interval: weekly\n" }, { "path": ".github/workflows/ci.yml", "content": "name: Continuous Integration\n\non:\n pull_request:\n push:\n branches:\n - master\n\njobs:\n check:\n runs-on: ubuntu-latest\n name: Lint, typecheck and test\n\n steps:\n - name: Checkout code\n uses: actions/checkout@v3\n\n - uses: pnpm/action-setup@v3\n with:\n version: 8\n\n - name: Use Node.js 20\n uses: actions/setup-node@v3\n with:\n node-version: 20\n cache: 'pnpm'\n\n - name: Install dependencies\n run: pnpm i \n\n - name: Run tests\n run: pnpm run test\n\n - name: Build\n run: pnpm run build\n" }, { "path": ".github/workflows/release.yml", "content": "name: Release\n\non:\n push:\n branches:\n - master\n\njobs:\n prepare:\n runs-on: ubuntu-latest\n name: Checks\n\n steps:\n - name: Checkout code\n uses: actions/checkout@v3\n\n - uses: pnpm/action-setup@v3\n with:\n version: 8\n\n - name: Use Node.js 20\n uses: actions/setup-node@v3\n with:\n node-version: 20\n cache: 'pnpm'\n\n - name: Install dependencies\n run: pnpm i \n\n - name: Run tests\n run: pnpm run test\n\n build-and-release:\n runs-on: ubuntu-latest\n needs: prepare\n name: Release\n\n steps:\n - name: Checkout code\n uses: actions/checkout@v3\n\n - uses: pnpm/action-setup@v3\n with:\n version: 8\n\n - name: Use Node.js 20\n uses: actions/setup-node@v3\n with:\n node-version: 20\n cache: 'pnpm'\n\n - name: Install dependencies\n run: pnpm i \n\n - name: Build\n run: pnpm run build\n\n - name: Release\n env:\n NPM_TOKEN: ${{ secrets.NPM_TOKEN }}\n GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}\n run: pnpm run release\n" }, { "path": ".gitignore", "content": "*.swp\n*~\n*.iml\n.*.haste_cache.*\n.DS_Store\n.idea\nnpm-debug.log\nyarn-error.log\nnode_modules\ndist\ncoverage\n/native\n.docz/\n.rpt2_cache\nsettings.json\n*.code-workspace\nyarn.lock\nyarn-error.log\ndocs-build" }, { "path": ".prettierrc.js", "content": "module.exports = require(\"@significa/prettier-config\");\n" }, { "path": ".storybook/main.ts", "content": "import type { StorybookConfig } from \"@storybook/react-vite\";\nconst config: StorybookConfig = {\n stories: [\"../docs/**/*.mdx\", \"../docs/**/*.stories.@(js|jsx|ts|tsx)\"],\n addons: [\n \n ],\n framework: {\n name: \"@storybook/react-vite\",\n options: {},\n },\n};\nexport default config;\n" }, { "path": ".storybook/preview-head.html", "content": "" }, { "path": ".storybook/preview.tsx", "content": "import React from \"react\";\n\nimport type { Preview } from \"@storybook/react\";\n\nconst preview: Preview = {\n parameters: {\n \n },\n decorators: [\n (Story) => (\n
\n \n
\n ),\n ],\n};\n\nexport default preview;\n" }, { "path": "CODE_OF_CONDUCT.md", "content": "# Contributor Covenant Code of Conduct\n\n## Our Pledge\n\nIn the interest of fostering an open and welcoming environment, we as contributors and maintainers pledge to making participation in our project and our community a harassment-free experience for everyone, regardless of age, body size, disability, ethnicity, gender identity and expression, level of experience, nationality, personal appearance, race, religion, or sexual identity and orientation.\n\n## Our Standards\n\nExamples of behavior that contributes to creating a positive environment include:\n\n* Using welcoming and inclusive language\n* Being respectful of differing viewpoints and experiences\n* Gracefully accepting constructive criticism\n* Focusing on what is best for the community\n* Showing empathy towards other community members\n\nExamples of unacceptable behavior by participants include:\n\n* The use of sexualized language or imagery and unwelcome sexual attention or advances\n* Trolling, insulting/derogatory comments, and personal or political attacks\n* Public or private harassment\n* Publishing others' private information, such as a physical or electronic address, without explicit permission\n* Other conduct which could reasonably be considered inappropriate in a professional setting\n\n## Our Responsibilities\n\nProject maintainers are responsible for clarifying the standards of acceptable behavior and are expected to take appropriate and fair corrective action in response to any instances of unacceptable behavior.\n\nProject maintainers have the right and responsibility to remove, edit, or reject comments, commits, code, wiki edits, issues, and other contributions that are not aligned to this Code of Conduct, or to ban temporarily or permanently any contributor for other behaviors that they deem inappropriate, threatening, offensive, or harmful.\n\n## Scope\n\nThis Code of Conduct applies both within project spaces and in public spaces when an individual is representing the project or its community. Examples of representing a project or community include using an official project e-mail address, posting via an official social media account, or acting as an appointed representative at an online or offline event. Representation of a project may be further defined and clarified by project maintainers.\n\n## Enforcement\n\nInstances of abusive, harassing, or otherwise unacceptable behavior may be reported by contacting the project team at danilowoz@gmail.com. The project team will review and investigate all complaints, and will respond in a way that it deems appropriate to the circumstances. The project team is obligated to maintain confidentiality with regard to the reporter of an incident. Further details of specific enforcement policies may be posted separately.\n\nProject maintainers who do not follow or enforce the Code of Conduct in good faith may face temporary or permanent repercussions as determined by other members of the project's leadership.\n\n## Attribution\n\nThis Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4, available at [http://contributor-covenant.org/version/1/4][version]\n\n[homepage]: http://contributor-covenant.org\n[version]: http://contributor-covenant.org/version/1/4/\n" }, { "path": "LICENSE", "content": "The MIT License (MIT)\n\nCopyright (c) 2015 Julian Ćwirko \n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in\nall copies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\nTHE SOFTWARE." }, { "path": "README.md", "content": "

\n \"react-content-loader\"\n

\n

\n \"Example's\n

\n\nSVG-Powered component to easily create placeholder loadings (like Facebook's cards loading).\n\n## Features\n\n- :gear: **Customizable:** Feel free to change the colors, speed, sizes, and even **RTL**;\n- :ok_hand: **Plug and play:** with many presets to use, see the [examples](http://danilowoz.com/create-content-loader/#gallery);\n- :pencil2: **DIY:** use the [create-content-loader](https://danilowoz.com/create-content-loader) to create your own custom loaders easily;\n- 📱 **React Native support**: same API, as same powerful features;\n- ⚛️ **Really lightweight:** less than **2kB** and **0 dependencies** for web version;\n\n## Index\n\n- [Getting Started](#gettingstarted)\n- [Usage](#usage)\n - [Native](#native)\n- [Options](#options)\n- [Examples](#examples)\n- [Troubleshooting](#troubleshooting)\n- [Similar packages](#similarpackages)\n- [Development](#development)\n\n## Getting Started\n\n```sh\nnpm i react-content-loader --save\n```\n\n```sh\nyarn add react-content-loader\n```\n\n### For React Native\n\n```sh\nnpm i react-content-loader react-native-svg --save\n```\n\n```sh\nyarn add react-content-loader react-native-svg\n```\n\nCDN from [JSDELIVR](https://www.jsdelivr.com/package/npm/react-content-loader)\n\n## Usage\n\nThere are two ways to use it:\n\n**1. Presets, see the [examples](https://danilowoz.com/react-content-loader/):**\n\n```jsx\nimport ContentLoader, { Facebook } from 'react-content-loader'\n\nconst MyLoader = () => \nconst MyFacebookLoader = () => \n```\n\n**2. Custom mode, see the [online tool](https://danilowoz.com/create-content-loader)**\n\n```jsx\nconst MyLoader = () => (\n \n {/* Only SVG shapes */}    \n \n \n \n \n)\n```\n\n**Still not clear?** Take a look at this working example at [codesandbox.io](https://codesandbox.io/s/moojk887z9)\nOr try the components editable demo hands-on and install it from [bit.dev](https://bit.dev/danilowoz/react-content-loader)\n\n## Native\n\n`react-content-loader` can be used with React Native in the same way as web version with the same import:\n\n**1. Presets, see the [examples](#examples):**\n\n```jsx\nimport ContentLoader, { Facebook } from 'react-content-loader/native'\n\nconst MyLoader = () => \nconst MyFacebookLoader = () => \n```\n\n**2. Custom mode**\n\n**To create custom loaders there is an important difference:** as React Native doesn't have any native module for SVG components, it's necessary to import the shapes from [react-native-svg](https://github.com/react-native-community/react-native-svg) or use the named export Rect and Circle from `react-content-loader` import:\n\n```jsx\nimport ContentLoader, { Rect, Circle } from 'react-content-loader/native'\n\nconst MyLoader = () => (\n \n \n \n \n \n)\n```\n\n## Options\n\n|
Prop name and type
| Environment | Description |\n| ---------------------------------------------------------------- | -------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| **`animate?: boolean`**
Defaults to `true` | React DOM
React Native | Opt-out of animations with `false` |\n| **`title?: string`**
Defaults to `Loading...` | React DOM only | It's used to describe what element it is. 
Use `''` (empty string) to remove. |\n| **`baseUrl?: string`**
Defaults to an empty string | React DOM only | Required if you're using `` document ``. 
This prop is common used as: 
`` which will fill the SVG attribute with the relative path. Related [#93](https://github.com/danilowoz/react-content-loader/issues/93). |\n| **`speed?: number`**
Defaults to `1.2` | React DOM
React Native | Animation speed in seconds. |\n| **`viewBox?: string`**
Defaults to `undefined` | React DOM
React Native | Use viewBox props to set a custom viewBox value,
for more information about how to use it,
read the article [How to Scale SVG](https://css-tricks.com/scale-svg/). |\n| **`gradientRatio?: number`**
Defaults to `1.2` | React DOM only | Width of the animated gradient as a fraction of the view box width. |\n| **`rtl?: boolean`**
Defaults to `false` | React DOM
React Native | Content right-to-left. |\n| **`backgroundColor?: string`**
Defaults to `#f5f6f7` | React DOM
React Native | Used as background of animation. |\n| **`foregroundColor?: string`**
Defaults to `#eee` | React DOM
React Native | Used as the foreground of animation. |\n| **`backgroundOpacity?: number`**
Defaults to `1` | React DOM
React Native | Background opacity (0 = transparent, 1 = opaque)
used to solve an issue in [Safari](#safari--ios) |\n| **`foregroundOpacity?: number`**
Defaults to `1` | React DOM
React Native | Animation opacity (0 = transparent, 1 = opaque)
used to solve an issue in [Safari](#safari--ios) |\n| **`style?: React.CSSProperties`**
Defaults to `{}` | React DOM only | |\n| **`uniqueKey?: string`**
Defaults to random unique id | React DOM only | Use the same value of prop key, 
that will solve inconsistency on the SSR, see more [here](https://github.com/danilowoz/react-content-loader/issues/78). |\n| **`beforeMask?: JSX.Element`**
Defaults to null | React DOM
React Native | Define custom shapes before content, 
see more [here](https://github.com/danilowoz/react-content-loader/issues/266). |\n\nSee all options [live](https://danilowoz.com/react-content-loader/)\n\n## Examples\n\n##### Facebook Style\n\n```jsx\nimport { Facebook } from 'react-content-loader'\n\nconst MyFacebookLoader = () => \n```\n\n\"Facebook Style\"\n\n##### Instagram Style\n\n```jsx\nimport { Instagram } from 'react-content-loader'\n\nconst MyInstagramLoader = () => \n```\n\n\"Instagram Style\"\n\n##### Code Style\n\n```jsx\nimport { Code } from 'react-content-loader'\n\nconst MyCodeLoader = () => \n```\n\n\"Code Style\"\n\n##### List Style\n\n```jsx\nimport { List } from 'react-content-loader'\n\nconst MyListLoader = () => \n```\n\n\"List Style\"\n\n##### Bullet list Style\n\n```jsx\nimport { BulletList } from 'react-content-loader'\n\nconst MyBulletListLoader = () => \n```\n\n\"Bullet list Style\"\n\n### Custom Style\n\nFor the custom mode, use the\n[online tool](https://danilowoz.com/create-content-loader).\n\n```jsx\nconst MyLoader = () => (\n \n {/* Only SVG shapes */}\n \n \n \n \n)\n```\n\n![Custom](https://user-images.githubusercontent.com/4838076/36352947-b87019a8-149e-11e8-99ba-c71c2bcf8733.gif)\n\n## Troubleshooting\n\n#### Responsive - Mobile version\n\nIn order to avoid unexpected behavior, the package doesn't have opinioned settings. So if it needs to be responsive, have in mind that the output of the package is a regular SVG, so it just needs the same attributes to become a regular SVG responsive, which means:\n\n```jsx\nimport { Code } from 'react-content-loader'\n\nconst MyCodeLoader = () => (\n \n)\n```\n\n#### Server-side rendering (SSR) - Match snapshot\n\nAs the main component generates random values to match the id of the SVG element with background style, it can encounter unexpected errors and unmatching warning on render, once the random value of id will be generated twice, in case of SSR: server and client; or in case of snapshot test: on the first match and re-running the test.\n\nTo fix it, set the prop [`uniqueKey`](https://github.com/danilowoz/react-content-loader#uniquekey-string---web-only), then the id will not be random anymore:\n\n```jsx\nimport { Facebook } from 'react-content-loader'\n\nconst MyFacebookLoader = () => \n```\n\n#### **Alpha is not working: Safari / iOS**\n\nWhen using `rgba` as a `backgroundColor` or `foregroundColor` value, [Safari does not respect the alpha channel](https://github.com/w3c/svgwg/issues/180), meaning that the color will be opaque. To prevent this, instead of using a `rgba` value for `backgroundColor`/`foregroundColor`, use the `rgb` equivalent and move the alpha channel value to the `backgroundOpacity`/`foregroundOpacity` props.\n\n```jsx\n{/* Opaque color in Safari and iOS */}\n\n\n\n{/_ Semi-transparent color in Safari and iOS _/}\n\n\n\n```\n\n#### **Black box in Safari / iOS (again)**\n\nUsing the base tag on a page that contains SVG elements fails to render and it looks like a black box. Just remove the **base-href** tag from the `` and the issue has been solved.\n\n\"black\n\nSee: [#93](https://github.com/danilowoz/react-content-loader/issues/93) / [109](https://github.com/danilowoz/react-content-loader/issues/109)\n\n#### Browser supports SVG-Animate\n\nOld browsers don't support animation in SVG ([compatibility list](https://caniuse.com/#search=SVGAnimateElement)), and if your project must support IE, for examples, here's a couple of ways to make sure that browser supports SVG Animate:\n\n- `window.SVGAnimateElement`\n- `document.implementation.hasFeature(\"http://www.w3.org/TR/SVG11/feature#SVG-Animation\", \"1.1\")`\n- Or even use https://modernizr.com/\n\n## Similar packages\n\n- React Native: [rn-placeholder](https://github.com/mfrachet/rn-placeholder), [react-native-svg-animated-linear-gradient](https://github.com/virusvn/react-native-svg-animated-linear-gradient);\n- [Preact](https://github.com/bonitasoft/preact-content-loader);\n- Vue.js: [vue-content-loading](https://github.com/LucasLeandro1204/vue-content-loading), [vue-content-loader](https://github.com/egoist/vue-content-loader);\n- Angular: [ngx-content-loading](https://github.com/Gbuomprisco/ngx-content-loading), [ngx-content-loader](https://github.com/NetanelBasal/ngx-content-loader).\n\n---\n\n## Development\n\nFork the repo and then clone it\n\n```\n$ git clone git@github.com:YourUsername/react-content-loader.git && cd react-content-loader\n```\n\n`$ npm i`: Install the dependencies;\n\n`$ npm run build`: Build to production;\n\n`$ npm run dev`: Run the Storybook to see your changes;\n\n`$ npm run test`: Run all tests: type checking, unit tests on web and native;\n\n`$ npm run test:watch`: Watch unit tests;\n\n### React Native\n\nAs React Native doesn't support symbolic links (to link the dependency to another folder) and as there is no playground to check your contributions (like storybook), this is recommended strategy to run the project locally:\n\n1. Create a new React Native from scratch, either Metro or create-react-native-app;\n2. Install the dependency to your root project:\n `yarn add react-content-loader react-native-svg`\n3. Open the project just created and clone this repository there;\n4. Create your loading component and point the `react-content-loader` to the project just cloned, like:\n `import ContentLoader, { Rect, Circle } from './react-content-loader/native'`\n\n### Commit messages\n\nCommit messages should follow the [commit message convention](https://conventionalcommits.org/) so, changelogs could be generated automatically by that. Commit messages are validated automatically upon commit. If you aren't familiar with the commit message convention, you can use yarn commit (or `npm run commit`) instead of git commit, which provides an interactive CLI for generating proper commit messages.\n\n## License\n\n[MIT](https://github.com/danilowoz/react-content-loader/blob/master/LICENSE)\n" }, { "path": "__mocks__/react-native-svg.js", "content": "import React from 'react';\n\nconst createComponent = function(name) {\n return class extends React.Component {\n // overwrite the displayName, since this is a class created dynamically\n static displayName = name;\n\n render() {\n return React.createElement(name, this.props, this.props.children);\n }\n };\n};\n\n// Mock all react-native-svg exports\n// from https://github.com/magicismight/react-native-svg/blob/master/index.js\nconst Svg = createComponent('Svg');\nconst Circle = createComponent('Circle');\nconst Ellipse = createComponent('Ellipse');\nconst G = createComponent('G');\nconst Text = createComponent('Text');\nconst TextPath = createComponent('TextPath');\nconst TSpan = createComponent('TSpan');\nconst Path = createComponent('Path');\nconst Polygon = createComponent('Polygon');\nconst Polyline = createComponent('Polyline');\nconst Line = createComponent('Line');\nconst Rect = createComponent('Rect');\nconst Use = createComponent('Use');\nconst Image = createComponent('Image');\nconst Symbol = createComponent('Symbol');\nconst Defs = createComponent('Defs');\nconst LinearGradient = createComponent('LinearGradient');\nconst RadialGradient = createComponent('RadialGradient');\nconst Stop = createComponent('Stop');\nconst ClipPath = createComponent('ClipPath');\nconst Pattern = createComponent('Pattern');\nconst Mask = createComponent('Mask');\n\nexport {\n Svg,\n Circle,\n Ellipse,\n G,\n Text,\n TextPath,\n TSpan,\n Path,\n Polygon,\n Polyline,\n Line,\n Rect,\n Use,\n Image,\n Symbol,\n Defs,\n LinearGradient,\n RadialGradient,\n Stop,\n ClipPath,\n Pattern,\n Mask,\n};\n\nexport default Svg;" }, { "path": "babel.config.js", "content": "module.exports = {\n presets: [\n 'module:metro-react-native-babel-preset',\n '@babel/preset-typescript',\n ],\n plugins: [['@babel/plugin-transform-private-methods', { loose: true }]],\n}\n" }, { "path": "docs/index.stories.tsx", "content": "import React from 'react'\nimport SyntaxHighlighter from 'react-syntax-highlighter'\nimport { docco } from 'react-syntax-highlighter/dist/esm/styles/hljs'\n\nimport ContentLoader, {\n BulletList,\n Code,\n Facebook,\n Instagram,\n List,\n} from '../src/web'\n\nexport default {\n title: 'React Content Loader',\n}\n\nconst SyntaxCode = ({ children }) => {\n return (\n \n {children}\n \n )\n}\n\n/**\n * Animated\n */\nexport const animate = () => {\n return (\n <>\n {''}\n \n\n {''}\n \n \n )\n}\n\nanimate.story = {\n parameters: {\n notes: `##\\`animate?: boolean\\` \n \n Defaults to \\`true\\`. Opt-out of animations with \\`false\\``,\n },\n}\n\n/**\n * Background color\n */\nexport const backgroundColor = () => {\n return (\n <>\n {''}\n \n \n )\n}\n\nbackgroundColor.story = {\n parameters: {\n notes: `## \\`backgroundColor?: string\\`\n\n Defaults to \\`#f5f6f7\\` which is used as background of animation.`,\n },\n}\n\n/**\n * Foreground color\n */\nexport const foregroundColor = () => {\n return (\n <>\n {''}\n \n \n )\n}\n\nforegroundColor.story = {\n parameters: {\n notes: `## \\`foregroundColor?: string\\`\n\n Defaults to \\`#eee\\` which is used as foreground of animation.`,\n },\n}\n\n/**\n * Background opacity\n */\nexport const backgroundOpacity = () => {\n return (\n <>\n {''}\n \n \n )\n}\n\nbackgroundOpacity.story = {\n parameters: {\n notes: `## \\`backgroundOpacity?: number\\`\n\n Defaults to \\`1\\`. Background opacity (0 = transparent, 1 = opaque) used to solve a issue in [Safari](#bugfix-in-safari)`,\n },\n}\n\n/**\n * Foreground opacity\n */\nexport const foregroundOpacity = () => {\n return (\n <>\n {''}\n \n \n )\n}\n\nforegroundOpacity.story = {\n parameters: {\n notes: `## \\`foregroundOpacity?: number\\`\n\n Defaults to \\`1\\`. Animation opacity (0 = transparent, 1 = opaque) used to solve a issue in [Safari](#bugfix-in-safari)`,\n },\n}\n\n/**\n * Base URL\n */\nexport const baseURL = () => {\n return (\n <>\n {''}\n \n \n )\n}\n\nbaseURL.story = {\n parameters: {\n notes: `## \\`baseUrl?: string\\`\n\n Required if you're using \\`\\` in the \\`\\`. Defaults to an empty string. This prop is common used as: \\`\\` which will fill the SVG attribute with the relative path. Related [#93](https://github.com/danilowoz/react-content-loader/issues/93).\n `,\n },\n}\n\n/**\n * Children\n */\nexport const children = () => {\n return (\n <>\n

Custom

\n {`\n \n \n \n`}\n \n \n \n \n \n\n

Default

\n {``}\n \n \n )\n}\n\nchildren.story = { parameters: { notes: `## \\`children?: ReactNode\\`` } }\n\n/**\n * Gradient Ratio\n */\nexport const gradientRatio = () => {\n return (\n <>\n {``}\n \n\n {``}\n \n \n )\n}\n\ngradientRatio.story = {\n parameters: {\n notes: `## \\`gradientRatio?: number\\`\n\n Defaults to \\`2\\`. Width of the animated gradient as a fraction of the viewbox width.`,\n },\n}\n\n/**\n * Gradient Direction\n */\nexport const gradientDirection = () => {\n return (\n <>\n {``}\n \n\n {``}\n \n \n )\n}\n\ngradientDirection.story = {\n parameters: {\n notes: `## \\`gradientDirection?: 'left-right' | 'top-bottom' \\`\n\n Defaults to \\`left-right\\`. Direction in which the gradient is animated. Useful to implement top-down animations`,\n },\n}\n\n/**\n * Speed\n */\nexport const speed = () => {\n return (\n <>\n {``}\n \n {``}\n \n \n )\n}\n\nspeed.story = {\n parameters: {\n notes: `## \\`speed?: number\\`\n\n Defaults to \\`1.2\\`. Animation speed in seconds.`,\n },\n}\n\n/**\n * RTL\n */\nexport const RTL = () => {\n return (\n <>\n {``}\n \n \n )\n}\n\nRTL.story = {\n parameters: {\n notes: `## \\`rtl?: boolean\\`\n\n Defaults to \\`false\\`. Content right-to-left.`,\n },\n}\n\n/**\n * Unique key\n */\nexport const uniqueKey = () => {\n return (\n <>\n {``}\n \n \n )\n}\n\nuniqueKey.story = {\n parameters: {\n notes: `## \\`uniqueKey?: string\\`\n \n Defaults to random unique id. Use the same value of prop key, that will solve inconsistency on the SSR, see more [here](https://github.com/danilowoz/react-content-loader/issues/78).`,\n },\n}\n\n/**\n * Responsive\n */\nexport const responsive = () => {\n return (\n
\n {\"'\"}\n \n
\n )\n}\n\n/**\n * Title\n */\nexport const title = () => {\n return (\n <>\n {``}\n \n \n )\n}\n\ntitle.story = {\n parameters: {\n notes: `## \\`title?: string | boolean\\`\n\n Defaults to \\`Loading interface...\\`. It's used to describe what element it is. Use \\`false\\` to remove.\n `,\n },\n}\n\n/**\n * View box\n */\nexport const viewBox = () => {\n return (\n <>\n {''}\n \n\n {''}\n \n \n )\n}\n\nviewBox.story = {\n parameters: {\n notes: `## \\`viewBox?: string\\`\n\n Use viewbox props to set viewbox value.\n Additionally, pass viewBox props as empty string to remove viewBox.`,\n },\n}\n\n/**\n * Presets\n */\nexport const presets = () => {\n return (\n <>\n {''}\n \n\n {''}\n \n\n {''}\n \n\n {''}\n \n\n {''}\n \n \n )\n}\n\n/**\n * Content loader vs SVG\n */\nexport const contentLoaderVsSVG = () => {\n return (\n <>\n \n \n \n \n \n \n \n \n \n\n \n \n \n \n \n \n \n \n \n \n )\n}\n\n/**\n * beforeMask\n */\nexport const BeforeMask = () => {\n return (\n <>\n \n {`\n }\n>\n \n \n \n \n`}\n \n \n }\n >\n \n \n \n \n \n \n )\n}\n" }, { "path": "jest.native.config.js", "content": "module.exports = {\n preset: 'react-native',\n transformIgnorePatterns: [\n 'node_modules/.pnpm/(?!react-native-payfort-sdk|react-native)/',\n ],\n testRegex: '/src/native/__tests__/.*(\\\\.|/)(test|spec)\\\\.[jt]sx?$',\n}\n" }, { "path": "jest.web.config.js", "content": "module.exports = {\n verbose: true,\n transform: {\n '^.+\\\\.(t|j)sx?$': 'ts-jest',\n },\n testRegex: '/src/web/__tests__/.*(\\\\.|/)(test|spec)\\\\.[jt]sx?$',\n roots: ['/src'],\n moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'],\n preset: 'ts-jest',\n}\n" }, { "path": "package.json", "content": "{\n \"name\": \"react-content-loader\",\n \"version\": \"6.2.1\",\n \"description\": \"SVG-Powered component to easily create placeholder loadings (like Facebook cards loading)\",\n \"repository\": {\n \"type\": \"git\",\n \"url\": \"https://github.com/danilowoz/react-content-loader\"\n },\n \"author\": \"Danilo Woznica \",\n \"license\": \"MIT\",\n \"main\": \"dist/react-content-loader.cjs.js\",\n \"module\": \"dist/react-content-loader.es.js\",\n \"jsnext:main\": \"dist/react-content-loader.es.js\",\n \"types\": \"dist/web/index.d.ts\",\n \"exports\": {\n \".\": {\n \"types\": \"./dist/web/index.d.ts\",\n \"require\": \"./dist/react-content-loader.cjs.js\",\n \"import\": \"./dist/react-content-loader.es.js\",\n \"default\": \"./dist/react-content-loader.cjs.js\"\n },\n \"./native\": {\n \"types\": \"./native/native/index.d.ts\",\n \"require\": \"./native/react-content-loader.native.cjs.js\",\n \"import\": \"./native/react-content-loader.native.es.js\",\n \"default\": \"./native/react-content-loader.native.cjs.js\"\n }\n },\n \"bugs\": {\n \"url\": \"https://github.com/danilowoz/react-content-loader/issues\"\n },\n \"homepage\": \"https://github.com/danilowoz/react-content-loader\",\n \"keywords\": [\n \"react\",\n \"react-native\",\n \"skeleton\",\n \"placeholder\",\n \"loader\",\n \"loading\",\n \"content\",\n \"svg\"\n ],\n \"files\": [\n \"dist\",\n \"native\"\n ],\n \"sideEffects\": false,\n \"scripts\": {\n \"dev\": \"storybook dev -p 6006\",\n \"build\": \"rm -fr ./dist ./native && rollup -c\",\n \"build:docs\": \"build-storybook -o docs-build\",\n \"test\": \"npm run test:tsc && npm run test:unit\",\n \"test:unit\": \"npm run test:unit:web && npm run test:unit:native\",\n \"test:unit:web\": \"jest -c jest.web.config.js\",\n \"test:unit:native\": \"jest -c jest.native.config.js\",\n \"test:watch\": \"npm run test:unit -- --watch\",\n \"test:tsc\": \"tsc\",\n \"test:tsc:watch\": \"npm run tsc -- --watch\",\n \"commit\": \"git-cz\",\n \"format\": \"prettier --write \\\"src/**/*.{ts,tsx}\\\"\",\n \"release\": \"semantic-release\"\n },\n \"devDependencies\": {\n \"@babel/plugin-transform-private-methods\": \"^7.23.3\",\n \"@babel/preset-react\": \"^7.23.3\",\n \"@babel/preset-typescript\": \"^7.23.3\",\n \"@babel/runtime\": \"^7.24.0\",\n \"@commitlint/cli\": \"^11.0.0\",\n \"@commitlint/config-conventional\": \"8.2.0\",\n \"@significa/prettier-config\": \"0.0.9\",\n \"@storybook/react\": \"^7.6.17\",\n \"@storybook/react-vite\": \"^7.6.17\",\n \"@storybook/storybook-deployer\": \"^2.8.6\",\n \"@types/jest\": \"24.0.24\",\n \"@types/react\": \"18.2.64\",\n \"@types/react-dom\": \"18.2.21\",\n \"@types/react-test-renderer\": \"18.0.7\",\n \"@typescript-eslint/eslint-plugin\": \"2.13.0\",\n \"awesome-typescript-loader\": \"5.2.1\",\n \"commitizen\": \"^4.2.1\",\n \"cz-conventional-changelog\": \"3.0.2\",\n \"husky\": \"3.1.0\",\n \"jest\": \"29.7.0\",\n \"jest-environment-jsdom\": \"^29.7.0\",\n \"metro-react-native-babel-preset\": \"^0.77.0\",\n \"prettier\": \"1.19.1\",\n \"react\": \"^18.2.0\",\n \"react-dom\": \"^18.2.0\",\n \"react-native\": \"^0.73.3\",\n \"react-native-svg\": \"15.1.0\",\n \"react-syntax-highlighter\": \"^12.2.1\",\n \"react-test-renderer\": \"18.2.0\",\n \"rollup\": \"1.27.14\",\n \"rollup-plugin-copy\": \"3.1.0\",\n \"rollup-plugin-replace\": \"2.2.0\",\n \"rollup-plugin-typescript2\": \"0.25.3\",\n \"rollup-plugin-uglify\": \"6.0.4\",\n \"semantic-release\": \"^17.4.2\",\n \"storybook\": \"^7.6.17\",\n \"ts-jest\": \"^29.1.2\",\n \"tslib\": \"^2.6.2\",\n \"typescript\": \"5.4.2\"\n },\n \"peerDependencies\": {\n \"react\": \">=18.0.0\"\n },\n \"husky\": {\n \"hooks\": {\n \"pre-commit\": \"npm run format\",\n \"commit-msg\": \"commitlint -E HUSKY_GIT_PARAMS\"\n }\n },\n \"commitlint\": {\n \"extends\": [\n \"@commitlint/config-conventional\"\n ]\n },\n \"config\": {\n \"commitizen\": {\n \"path\": \"./node_modules/cz-conventional-changelog\"\n }\n },\n \"engines\": {\n \"node\": \">=10\"\n }\n}\n" }, { "path": "rollup.config.js", "content": "/* eslint-disable @typescript-eslint/camelcase */\nimport replace from 'rollup-plugin-replace'\nimport { uglify } from 'rollup-plugin-uglify'\nimport typescript from 'rollup-plugin-typescript2'\nimport copy from 'rollup-plugin-copy'\n\nimport pkg from './package.json'\n\nconst mergeAll = objs => Object.assign({}, ...objs)\n\nconst cjs = {\n exports: 'named',\n format: 'cjs',\n sourcemap: true,\n}\n\nconst esm = {\n format: 'es',\n sourcemap: true,\n}\n\nconst globals = { react: 'React', 'react-dom': 'ReactDOM' }\n\nconst commonPlugins = [\n typescript({\n typescript: require('typescript'),\n }),\n]\n\nconst configBase = {\n output: {\n exports: 'named',\n },\n external: [\n ...Object.keys(pkg.dependencies || {}),\n ...Object.keys(pkg.peerDependencies || {}),\n ],\n plugins: commonPlugins,\n}\n\nconst umdConfig = mergeAll([\n configBase,\n {\n input: 'src/web/index.ts',\n output: mergeAll([\n configBase.output,\n {\n file: `dist/${pkg.name}.js`,\n format: 'umd',\n name: 'ContentLoader',\n globals,\n },\n ]),\n external: Object.keys(pkg.peerDependencies || {}),\n },\n])\n\nconst devUmdConfig = mergeAll([\n umdConfig,\n {\n input: 'src/web/index.ts',\n plugins: umdConfig.plugins.concat(\n replace({\n 'process.env.NODE_ENV': JSON.stringify('development'),\n })\n ),\n },\n])\n\nconst prodUmdConfig = mergeAll([\n umdConfig,\n {\n input: 'src/web/index.ts',\n output: mergeAll([\n umdConfig.output,\n { file: umdConfig.output.file.replace(/\\.js$/, '.min.js') },\n ]),\n },\n {\n plugins: umdConfig.plugins.concat(\n replace({\n 'process.env.NODE_ENV': JSON.stringify('production'),\n }),\n uglify({\n compress: {\n pure_getters: true,\n unsafe: true,\n unsafe_comps: true,\n },\n })\n ),\n },\n])\n\nconst webConfig = mergeAll([\n configBase,\n {\n input: 'src/web/index.ts',\n output: [\n mergeAll([configBase.output, { ...esm, file: pkg.module }]),\n mergeAll([configBase.output, { ...cjs, file: pkg.main }]),\n ],\n plugins: configBase.plugins.concat(),\n },\n])\n\nconst nativeConfig = mergeAll([\n configBase,\n {\n input: './src/native/index.ts',\n output: [\n mergeAll([\n configBase.output,\n { ...esm, file: `native/${pkg.name}.native.es.js` },\n ]),\n mergeAll([\n configBase.output,\n { ...cjs, file: `native/${pkg.name}.native.cjs.js` },\n ]),\n ],\n plugins: configBase.plugins.concat(\n copy({\n targets: [{ src: 'src/native/package.json', dest: 'native' }],\n })\n ),\n },\n])\n\nexport default [devUmdConfig, prodUmdConfig, webConfig, nativeConfig]\n" }, { "path": "src/native/ContentLoader.tsx", "content": "import * as React from 'react'\nimport { Circle, Path, Rect } from 'react-native-svg'\n\nimport { Facebook, IContentLoaderProps } from '.'\nimport Svg from './Svg'\n\nconst ContentLoader: React.FC = props =>\n props.children ? : \n\nexport { Circle, Rect, Path }\n\nexport default ContentLoader\n" }, { "path": "src/native/Svg.tsx", "content": "import React, { Component, isValidElement } from 'react'\nimport { Animated } from 'react-native'\nimport Svg, {\n ClipPath,\n Defs,\n LinearGradient,\n Rect,\n Stop,\n} from 'react-native-svg'\n\nimport uid from '../shared/uid'\nimport { IContentLoaderProps } from './'\n\nconst AnimatedLinearGradient = Animated.createAnimatedComponent(LinearGradient)\n\nclass NativeSvg extends Component {\n static defaultProps = {\n animate: true,\n backgroundColor: '#f5f6f7',\n backgroundOpacity: 1,\n foregroundColor: '#eee',\n foregroundOpacity: 1,\n rtl: false,\n speed: 1.2,\n interval: 0.25,\n style: {},\n beforeMask: null,\n }\n\n animatedValue = new Animated.Value(-1)\n\n fixedId = this.props.uniqueKey || uid()\n\n idClip = `${this.fixedId}-diff`\n\n idGradient = `${this.fixedId}-animated-diff`\n\n unmounted = false\n\n setAnimation = () => {\n // props.speed is in seconds as it is compatible with web\n // convert to milliseconds\n const durMs = this.props.speed * 1000\n const delay = durMs * this.props.interval\n\n Animated.timing(this.animatedValue, {\n toValue: 2,\n delay: delay,\n duration: durMs,\n useNativeDriver: true,\n }).start(() => {\n if (!this.unmounted && this.props.animate) {\n this.animatedValue.setValue(-1)\n this.setAnimation()\n }\n })\n }\n\n componentDidMount = () => {\n if (this.props.animate) {\n this.setAnimation()\n }\n }\n\n componentDidUpdate(prevProps: IContentLoaderProps) {\n if (!prevProps.animate && this.props.animate) {\n this.setAnimation()\n }\n }\n\n componentWillUnmount() {\n this.unmounted = true\n }\n\n render() {\n const {\n children,\n backgroundColor,\n backgroundOpacity,\n foregroundColor,\n foregroundOpacity,\n rtl,\n style,\n beforeMask,\n ...props\n } = this.props\n\n const x1Animation = this.animatedValue.interpolate({\n extrapolate: 'clamp',\n inputRange: [-1, 2],\n outputRange: ['-100%', '100%'],\n })\n\n const x2Animation = this.animatedValue.interpolate({\n extrapolate: 'clamp',\n inputRange: [-1, 2],\n outputRange: ['0%', '200%'],\n })\n\n const rtlStyle: object = rtl ? { transform: [{ rotateY: '180deg' }] } : {}\n const svgStyle = Object.assign(Object.assign({}, style), rtlStyle)\n\n // Remove unnecessary keys\n delete props.uniqueKey\n delete props.animate\n delete props.speed\n\n return (\n \n {beforeMask && isValidElement(beforeMask) ? beforeMask : null}\n\n \n\n \n {children}\n\n \n \n \n \n \n \n \n )\n }\n}\n\nexport default NativeSvg\n" }, { "path": "src/native/__tests__/ContentLoader.test.tsx", "content": "import * as React from 'react'\nimport * as renderer from 'react-test-renderer'\nimport * as ShallowRenderer from 'react-test-renderer/shallow'\n\nimport ContentLoader, { Circle, Rect } from '../ContentLoader'\n\njest.useFakeTimers()\n\ndescribe('ContentLoader', () => {\n describe('when type is custom', () => {\n const customWrapper = renderer.create(\n \n \n \n \n \n ).root\n\n it('should render custom element', () => {\n const rect = customWrapper.findAllByType(Rect)\n const circle = customWrapper.findAllByType(Circle)\n\n expect(rect.length).toBe(3)\n expect(circle.length).toBe(1)\n })\n })\n\n describe('Props are propagated', () => {\n const noPropsComponent = ShallowRenderer.createRenderer()\n noPropsComponent.render(\n \n \n \n )\n\n const withPropsComponent = ShallowRenderer.createRenderer()\n withPropsComponent.render(\n }\n >\n \n \n )\n\n const { props: propsFromEmpty } = noPropsComponent.getRenderOutput()\n const { props: propsFromFullField } = withPropsComponent.getRenderOutput()\n\n it(\"`speed` is a number and it's used\", () => {\n // defaultProps\n expect(typeof propsFromEmpty.speed).toBe('number')\n expect(propsFromEmpty.speed).toBe(1.2)\n // custom props\n expect(typeof propsFromFullField.speed).toBe('number')\n expect(propsFromFullField.speed).toBe(10)\n })\n\n it(\"`height` is a number and it's used\", () => {\n // custom props\n expect(typeof propsFromFullField.height).toBe('number')\n expect(propsFromFullField.height).toBe(200)\n })\n\n it(\"`width` is a number and it's used\", () => {\n // custom props\n expect(typeof propsFromFullField.width).toBe('number')\n expect(propsFromFullField.width).toBe(200)\n })\n\n it(\"`animate` is a boolean and it's used\", () => {\n // defaultProps\n expect(typeof propsFromEmpty.animate).toBe('boolean')\n expect(propsFromEmpty.animate).toBe(true)\n // custom props\n expect(typeof propsFromFullField.animate).toBe('boolean')\n expect(propsFromFullField.animate).toBe(false)\n })\n\n it(\"`backgroundColor` is a string and it's used\", () => {\n // defaultProps\n expect(typeof propsFromEmpty.backgroundColor).toBe('string')\n expect(propsFromEmpty.backgroundColor).toBe('#f5f6f7')\n // custom props\n expect(typeof propsFromFullField.backgroundColor).toBe('string')\n expect(propsFromFullField.backgroundColor).toBe('#000')\n })\n\n it(\"`foregroundColor` is a string and it's used\", () => {\n // defaultProps\n expect(typeof propsFromEmpty.foregroundColor).toBe('string')\n expect(propsFromEmpty.foregroundColor).toBe('#eee')\n // custom props\n expect(typeof propsFromFullField.foregroundColor).toBe('string')\n expect(propsFromFullField.foregroundColor).toBe('#fff')\n })\n\n it(\"`preserveAspectRatio` is a string and it's used\", () => {\n // custom props\n expect(typeof propsFromFullField.preserveAspectRatio).toBe('string')\n expect(propsFromFullField.preserveAspectRatio).toBe('xMaxYMax meet')\n })\n\n it(\"`style` is an object and it's used\", () => {\n // defaultProps\n expect(propsFromEmpty.style).toMatchObject({})\n // custom props\n expect(propsFromFullField.style).toMatchObject({ marginBottom: 10 })\n })\n\n it(\"`rtl` is a boolean and it's used\", () => {\n // defaultProps\n expect(typeof propsFromEmpty.rtl).toBe('boolean')\n expect(propsFromEmpty.rtl).toBe(false)\n // custom props\n expect(typeof propsFromFullField.rtl).toBe('boolean')\n expect(propsFromFullField.rtl).toBe(true)\n })\n\n it(\"`beforeMask` is a JSX Element and it's used\", () => {\n // defaultProps\n expect(typeof propsFromEmpty.beforeMask).toBe('object')\n expect(propsFromEmpty.beforeMask).toBe(null)\n // custom props\n expect(typeof propsFromFullField.beforeMask).toBe('object')\n expect(propsFromFullField.beforeMask).toEqual()\n })\n })\n})\n" }, { "path": "src/native/__tests__/Svg.test.tsx", "content": "import * as React from 'react'\nimport Svg, { ClipPath, LinearGradient, Stop } from 'react-native-svg'\nimport * as renderer from 'react-test-renderer'\n\nimport ContentLoader, { Rect } from '..'\n\ninterface IPredicateArgs {\n type: any\n props: any\n}\n\njest.useFakeTimers()\n\ndescribe('Svg', () => {\n const wrapper = renderer.create().root\n const predicateRectClipPath = ({ type, props }: IPredicateArgs) =>\n type === 'Rect' && props.clipPath\n const partsOfComponent = {\n allLinearGradient: wrapper.findAllByType(LinearGradient),\n allRectClipPath: wrapper.findAll(predicateRectClipPath),\n allStops: wrapper.findAllByType(Stop),\n clipPath: wrapper.findByType(ClipPath),\n linearGradient: wrapper.findByType(LinearGradient),\n rectClipPath: wrapper.find(predicateRectClipPath),\n svg: wrapper.findByType(Svg),\n }\n\n describe('it has basic elements necessary to work ', () => {\n it('has a `rect` with `clipPath`', () => {\n const { allRectClipPath } = partsOfComponent\n\n expect(allRectClipPath.length).toBe(1)\n })\n\n it('has a `linearGradient`', () => {\n const { allLinearGradient } = partsOfComponent\n\n expect(allLinearGradient.length).toBe(1)\n })\n\n it('has three `stop`', () => {\n const { allStops } = partsOfComponent\n\n expect(allStops.length).toBe(3)\n })\n\n it('has `stop` inside the `linearGradient`', () => {\n const { linearGradient } = partsOfComponent\n const stopsIntoLinearGradient = linearGradient.findAllByType(Stop)\n\n expect(stopsIntoLinearGradient.length).toBe(3)\n })\n })\n\n describe('unique key', () => {\n it('render two components with different ids', () => {\n // Wrapper\n const { clipPath, linearGradient } = partsOfComponent\n\n // Another component\n const anotherComp = renderer.create()\n .root\n const anotherClipPath = anotherComp.findByType(ClipPath)\n const anotherLinearGradient = anotherComp.findByType(LinearGradient)\n\n expect(clipPath.props.id).not.toBe(anotherClipPath.props.id)\n expect(linearGradient.props.id).not.toBe(anotherLinearGradient.props.id)\n })\n\n it('clipPath id and rect clipPath url are the same', () => {\n const { clipPath, rectClipPath } = partsOfComponent\n\n expect(rectClipPath.props.clipPath).toBe(`url(#${clipPath.props.id})`)\n })\n\n it('linearGradient id and rect clipPath fill are the same', () => {\n const { linearGradient, rectClipPath } = partsOfComponent\n\n expect(rectClipPath.props.fill).toBe(`url(#${linearGradient.props.id})`)\n })\n })\n\n describe('beforeMask', () => {\n it('beforeMask is used', () => {\n const wrapperWithBeforeMask = renderer.create(\n } />\n ).root\n\n const beforeMask = wrapperWithBeforeMask.findByProps({\n x: '123',\n })\n\n expect(beforeMask.props.x).toBe('123')\n })\n\n it('beforeMask should be a JSX Element', () => {\n const wrapperWithBeforeMask = renderer.create(\n // @ts-ignore\n } />\n ).root\n\n expect(() => {\n wrapperWithBeforeMask.findByProps({\n x: '123',\n })\n }).toThrow('No instances found with props: {\"x\":\"123\"}')\n })\n })\n})\n" }, { "path": "src/native/__tests__/__snapshots__/snapshots.test.tsx.snap", "content": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`ContentLoader snapshots renders correctly the basic version 1`] = `\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n\n`;\n\nexports[`ContentLoader snapshots renders correctly with beforeMask 1`] = `\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n\n`;\n\nexports[`ContentLoader snapshots renders correctly with beforeMask 2`] = `\n\n \n \n \n \n \n \n \n \n \n \n \n\n`;\n\nexports[`ContentLoader snapshots renders correctly with viewBox defined 1`] = `\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n\n`;\n\nexports[`ContentLoader snapshots renders correctly with viewBox defined and sizes defined too 1`] = `\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n\n`;\n\nexports[`ContentLoader snapshots renders correctly with viewBox empty 1`] = `\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n\n`;\n" }, { "path": "src/native/__tests__/presets/BulletListStyle.test.tsx", "content": "import 'react-native'\n\nimport * as React from 'react'\nimport * as renderer from 'react-test-renderer'\n\nimport BulletListStyle from '../../presets/BulletListStyle'\n\njest.useFakeTimers()\n\ndescribe('BulletListStyle', () => {\n const wrapper = renderer.create(\n \n )\n\n test('renders correctly', () => {\n const tree = wrapper.toJSON()\n\n expect(tree).toMatchSnapshot()\n })\n\n test('props are propagated ', () => {\n expect(wrapper.root.props.speed).toEqual(20)\n })\n})\n" }, { "path": "src/native/__tests__/presets/CodeStyle.test.tsx", "content": "import 'react-native'\n\nimport * as React from 'react'\nimport * as renderer from 'react-test-renderer'\n\nimport CodeStyle from '../../presets/CodeStyle'\n\njest.useFakeTimers()\n\ndescribe('CodeStyle', () => {\n const wrapper = renderer.create(\n \n )\n\n test('renders correctly', () => {\n const tree = wrapper.toJSON()\n\n expect(tree).toMatchSnapshot()\n })\n\n test('props are propagated ', () => {\n expect(wrapper.root.props.speed).toEqual(20)\n })\n})\n" }, { "path": "src/native/__tests__/presets/FacebookStyle.test.tsx", "content": "import 'react-native'\n\nimport * as React from 'react'\nimport * as renderer from 'react-test-renderer'\n\nimport FacebookStyle from '../../presets/FacebookStyle'\n\njest.useFakeTimers()\n\ndescribe('FacebookStyle', () => {\n const wrapper = renderer.create(\n \n )\n\n test('renders correctly', () => {\n const tree = wrapper.toJSON()\n\n expect(tree).toMatchSnapshot()\n })\n\n test('props are propagated ', () => {\n expect(wrapper.root.props.speed).toEqual(20)\n })\n})\n" }, { "path": "src/native/__tests__/presets/InstagramStyle.test.tsx", "content": "import 'react-native'\n\nimport * as React from 'react'\nimport * as renderer from 'react-test-renderer'\n\nimport InstagramStyle from '../../presets/InstagramStyle'\n\njest.useFakeTimers()\n\ndescribe('InstagramStyle', () => {\n const wrapper = renderer.create(\n \n )\n\n test('renders correctly', () => {\n const tree = wrapper.toJSON()\n\n expect(tree).toMatchSnapshot()\n })\n\n test('props are propagated ', () => {\n expect(wrapper.root.props.speed).toEqual(20)\n })\n})\n" }, { "path": "src/native/__tests__/presets/ListStyle.test.tsx", "content": "import 'react-native'\n\nimport * as React from 'react'\nimport * as renderer from 'react-test-renderer'\n\nimport ListStyle from '../../presets/ListStyle'\n\njest.useFakeTimers()\n\ndescribe('ListStyle', () => {\n const wrapper = renderer.create(\n \n )\n\n test('renders correctly', () => {\n const tree = wrapper.toJSON()\n\n expect(tree).toMatchSnapshot()\n })\n\n test('props are propagated ', () => {\n expect(wrapper.root.props.speed).toEqual(20)\n })\n})\n" }, { "path": "src/native/__tests__/presets/__snapshots__/BulletListStyle.test.tsx.snap", "content": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`BulletListStyle renders correctly 1`] = `\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n\n`;\n" }, { "path": "src/native/__tests__/presets/__snapshots__/CodeStyle.test.tsx.snap", "content": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`CodeStyle renders correctly 1`] = `\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n\n`;\n" }, { "path": "src/native/__tests__/presets/__snapshots__/FacebookStyle.test.tsx.snap", "content": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`FacebookStyle renders correctly 1`] = `\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n\n`;\n" }, { "path": "src/native/__tests__/presets/__snapshots__/InstagramStyle.test.tsx.snap", "content": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`InstagramStyle renders correctly 1`] = `\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n\n`;\n" }, { "path": "src/native/__tests__/presets/__snapshots__/ListStyle.test.tsx.snap", "content": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`ListStyle renders correctly 1`] = `\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n\n`;\n" }, { "path": "src/native/__tests__/snapshots.test.tsx", "content": "import * as React from 'react'\nimport * as renderer from 'react-test-renderer'\n\nimport ContentLoader, { Rect } from '../ContentLoader'\n\njest.useFakeTimers()\n\ndescribe('ContentLoader snapshots', () => {\n test('renders correctly the basic version', () => {\n const wrapper = renderer.create(\n \n )\n const tree = wrapper.toJSON()\n\n expect(tree).toMatchSnapshot()\n })\n\n test('renders correctly with viewBox empty', () => {\n const wrapper = renderer.create(\n \n )\n const tree = wrapper.toJSON()\n\n expect(tree).toMatchSnapshot()\n })\n\n test('renders correctly with viewBox defined', () => {\n const wrapper = renderer.create(\n \n )\n const tree = wrapper.toJSON()\n\n expect(tree).toMatchSnapshot()\n })\n\n test('renders correctly with viewBox defined and sizes defined too', () => {\n const wrapper = renderer.create(\n \n )\n const tree = wrapper.toJSON()\n\n expect(tree).toMatchSnapshot()\n })\n\n test('renders correctly with beforeMask', () => {\n let wrapper = renderer.create(\n \n \n \n \n }\n >\n \n \n )\n let tree = wrapper.toJSON()\n\n expect(tree).toMatchSnapshot()\n\n // with wrong type\n wrapper = renderer.create(\n // @ts-ignore\n }>\n \n \n )\n tree = wrapper.toJSON()\n\n expect(tree).toMatchSnapshot()\n })\n})\n" }, { "path": "src/native/index.ts", "content": "import { SvgProps } from 'react-native-svg'\n\nimport ContentLoader from './ContentLoader'\n\nexport interface IContentLoaderProps extends SvgProps {\n animate?: boolean\n backgroundColor?: string\n backgroundOpacity?: number\n foregroundColor?: string\n foregroundOpacity?: number\n rtl?: boolean\n speed?: number\n interval?: number\n uniqueKey?: string\n beforeMask?: JSX.Element\n}\n\nexport { default as Facebook } from './presets/FacebookStyle'\nexport { default as Instagram } from './presets/InstagramStyle'\nexport { default as Code } from './presets/CodeStyle'\nexport { default as List } from './presets/ListStyle'\nexport { default as BulletList } from './presets/BulletListStyle'\n\nexport { Circle, Rect, Path } from './ContentLoader'\nexport default ContentLoader\n" }, { "path": "src/native/package.json", "content": "{\n \"name\": \"react-content-loader/native\",\n \"private\": true,\n \"main\": \"./react-content-loader.native.cjs.js\",\n \"module\": \"./react-content-loader.native.es.js\",\n \"jsnext:main\": \"./react-content-loader.native.es.js\",\n \"types\": \"./native/index.d.ts\",\n \"dependencies\": {\n \"react-native-svg\": \"9.6.4\"\n },\n \"peerDependencies\": {\n \"react\": \"^16.0.0\",\n \"react-native\": \"^0.60.5\"\n }\n}\n" }, { "path": "src/native/presets/BulletListStyle.tsx", "content": "import * as React from 'react'\nimport { IContentLoaderProps } from '..'\nimport ContentLoader, { Circle, Rect } from '../ContentLoader'\n\nconst ReactContentLoaderBulletList: React.FC = props => (\n \n \n \n \n \n \n \n \n \n \n)\n\nexport default ReactContentLoaderBulletList\n" }, { "path": "src/native/presets/CodeStyle.tsx", "content": "import * as React from 'react'\n\nimport { IContentLoaderProps } from '..'\nimport ContentLoader, { Rect } from '../ContentLoader'\n\nconst ReactContentLoaderCode: React.FC = props => (\n \n \n \n \n \n \n \n \n \n \n)\n\nexport default ReactContentLoaderCode\n" }, { "path": "src/native/presets/FacebookStyle.tsx", "content": "import * as React from 'react'\n\nimport { IContentLoaderProps } from '..'\nimport ContentLoader, { Circle, Rect } from '../ContentLoader'\n\nconst ReactContentLoaderFacebook: React.FC = props => (\n \n \n \n \n \n \n \n \n)\n\nexport default ReactContentLoaderFacebook\n" }, { "path": "src/native/presets/InstagramStyle.tsx", "content": "import * as React from 'react'\n\nimport { IContentLoaderProps } from '..'\nimport ContentLoader, { Circle, Rect } from '../ContentLoader'\n\nconst ReactContentLoaderInstagram: React.FC = props => (\n \n \n \n \n \n \n)\n\nexport default ReactContentLoaderInstagram\n" }, { "path": "src/native/presets/ListStyle.tsx", "content": "import * as React from 'react'\n\nimport { IContentLoaderProps } from '..'\nimport ContentLoader, { Rect } from '../ContentLoader'\n\nconst ReactContentLoaderListStyle: React.FC = props => (\n \n \n \n \n \n \n \n \n)\n\nexport default ReactContentLoaderListStyle\n" }, { "path": "src/shared/uid.ts", "content": "export default (): string =>\n Math.random()\n .toString(36)\n .substring(6)\n" }, { "path": "src/web/ContentLoader.tsx", "content": "import * as React from 'react'\n\nimport { Facebook, IContentLoaderProps } from '.'\nimport Svg from './Svg'\n\nconst ContentLoader: React.FC = props =>\n props.children ? : \n\nexport default ContentLoader\n" }, { "path": "src/web/Svg.tsx", "content": "import * as React from 'react'\n\nimport { IContentLoaderProps } from './'\n\nconst SVG: React.FC = ({\n animate = true,\n backgroundColor = '#f5f6f7',\n backgroundOpacity = 1,\n baseUrl = '',\n children,\n foregroundColor = '#eee',\n foregroundOpacity = 1,\n gradientRatio = 2,\n uniqueKey,\n rtl = false,\n speed = 1.2,\n style = {},\n title = 'Loading...',\n beforeMask = null,\n ...props\n}) => {\n let fixedId = React.useId()\n if (uniqueKey) fixedId = uniqueKey\n const idClip = `${fixedId}-diff`\n const idGradient = `${fixedId}-animated-diff`\n const idAria = `${fixedId}-aria`\n\n const rtlStyle = rtl ? { transform: 'scaleX(-1)' } : null\n const dur = `${speed}s`\n\n const from = `${gradientRatio * -1} 0`\n const to = `${gradientRatio} 0`\n\n return (\n \n {title ? {title} : null}\n {beforeMask && React.isValidElement(beforeMask) ? beforeMask : null}\n \n\n \n {children}\n\n \n \n\n \n\n \n\n {animate && (\n \n )}\n \n \n \n )\n}\n\nexport default SVG\n" }, { "path": "src/web/__tests__/ContentLoader.test.tsx", "content": "import * as React from 'react'\nimport * as renderer from 'react-test-renderer'\nimport * as ShallowRenderer from 'react-test-renderer/shallow'\n\nimport ContentLoader from '../ContentLoader'\n\ndescribe('ContentLoader', () => {\n describe('when type is custom', () => {\n const customWrapper = renderer.create(\n \n \n \n \n \n ).root\n\n it('should render custom element', () => {\n const rect = customWrapper.findAllByType('rect')\n const circle = customWrapper.findAllByType('circle')\n\n expect(rect.length).toBe(3)\n expect(circle.length).toBe(1)\n })\n })\n\n describe('Props are propagated', () => {\n const noPropsComponent = ShallowRenderer.createRenderer()\n noPropsComponent.render(\n \n \n \n )\n\n const withPropsComponent = ShallowRenderer.createRenderer()\n withPropsComponent.render(\n }\n >\n \n \n )\n\n const { props: propsFromFullfield } = withPropsComponent.getRenderOutput()\n\n it(\"`speed` is a number and it's used\", () => {\n // custom props\n expect(typeof propsFromFullfield.speed).toBe('number')\n expect(propsFromFullfield.speed).toBe(10)\n })\n\n it(\"`height` is a number and it's used\", () => {\n // custom props\n expect(typeof propsFromFullfield.height).toBe('number')\n expect(propsFromFullfield.height).toBe(200)\n })\n\n it(\"`width` is a number and it's used\", () => {\n // custom props\n expect(typeof propsFromFullfield.width).toBe('number')\n expect(propsFromFullfield.width).toBe(200)\n })\n\n it(\"`gradientRatio` is a number and it's used\", () => {\n // custom props\n expect(typeof propsFromFullfield.gradientRatio).toBe('number')\n expect(propsFromFullfield.gradientRatio).toBe(0.5)\n })\n\n it(\"`animate` is a boolean and it's used\", () => {\n // custom props\n expect(typeof propsFromFullfield.animate).toBe('boolean')\n expect(propsFromFullfield.animate).toBe(false)\n })\n\n it(\"`backgroundColor` is a string and it's used\", () => {\n // custom props\n expect(typeof propsFromFullfield.backgroundColor).toBe('string')\n expect(propsFromFullfield.backgroundColor).toBe('#000')\n })\n\n it(\"`foregroundColor` is a string and it's used\", () => {\n // custom props\n expect(typeof propsFromFullfield.foregroundColor).toBe('string')\n expect(propsFromFullfield.foregroundColor).toBe('#fff')\n })\n\n it(\"`backgroundOpacity` is a number and it's used\", () => {\n // custom props\n expect(typeof propsFromFullfield.backgroundOpacity).toBe('number')\n expect(propsFromFullfield.backgroundOpacity).toBe(0.06)\n })\n\n it(\"`foregroundOpacity` is a number and it's used\", () => {\n // custom props\n expect(typeof propsFromFullfield.foregroundOpacity).toBe('number')\n expect(propsFromFullfield.foregroundOpacity).toBe(0.12)\n })\n\n it(\"`preserveAspectRatio` is a string and it's used\", () => {\n // custom props\n expect(typeof propsFromFullfield.preserveAspectRatio).toBe('string')\n expect(propsFromFullfield.preserveAspectRatio).toBe('xMaxYMax meet')\n })\n\n it(\"`style` is an object and it's used\", () => {\n // custom props\n expect(propsFromFullfield.style).toMatchObject({ marginBottom: '10px' })\n })\n\n it(\"`rtl` is a boolean and it's used\", () => {\n // custom props\n expect(typeof propsFromFullfield.rtl).toBe('boolean')\n expect(propsFromFullfield.rtl).toBe(true)\n })\n\n it(\"`title` is a string and it's used\", () => {\n // custom props\n expect(typeof propsFromFullfield.title).toBe('string')\n expect(propsFromFullfield.title).toBe('My custom loading title')\n })\n\n it(\"`baseUrl` is a string and it's used\", () => {\n // custom props\n expect(typeof propsFromFullfield.baseUrl).toBe('string')\n expect(propsFromFullfield.baseUrl).toBe('/mypage')\n })\n\n it(\"`uniqueKey` is a string and it's used\", () => {\n // custom props\n expect(typeof propsFromFullfield.uniqueKey).toBe('string')\n expect(propsFromFullfield.uniqueKey).toBe('my-id')\n })\n\n it(\"`beforeMask` is a JSX Element and it's used\", () => {\n // custom props\n expect(typeof propsFromFullfield.beforeMask).toBe('object')\n expect(propsFromFullfield.beforeMask).toEqual()\n })\n })\n})\n" }, { "path": "src/web/__tests__/Svg.test.tsx", "content": "import * as React from 'react'\nimport * as renderer from 'react-test-renderer'\n\nimport Svg from '..'\n\ninterface PredicateArgs {\n type: any\n props: any\n}\n\ndescribe('Svg', () => {\n const wrapper = renderer.create().root\n const predicateRectClipPath = ({ type, props }: PredicateArgs) =>\n type === 'rect' && props.clipPath\n const partsOfComponent = {\n allLinearGradient: wrapper.findAllByType('linearGradient'),\n allRectClipPath: wrapper.findAll(predicateRectClipPath),\n allStops: wrapper.findAllByType('stop'),\n clipPath: wrapper.findByType('clipPath'),\n linearGradient: wrapper.findByType('linearGradient'),\n rectClipPath: wrapper.find(predicateRectClipPath),\n svg: wrapper.findByType('svg'),\n title: wrapper.findByType('title'),\n }\n\n it('`baseUrl` is used correctly', () => {\n const baseUrl = '/page-path'\n const wrapperWithBaseUrl = renderer.create().root\n\n const clipPath = wrapperWithBaseUrl.findByType('clipPath')\n const linearGradient = wrapperWithBaseUrl.findByType('linearGradient')\n const rectClipPath = wrapperWithBaseUrl.find(predicateRectClipPath)\n\n expect(rectClipPath.props.clipPath).toBe(\n `url(${baseUrl}#${clipPath.props.id})`\n )\n expect(rectClipPath.props.style.fill).toBe(\n `url(${baseUrl}#${linearGradient.props.id})`\n )\n })\n\n describe('it has basic elements necessary to work ', () => {\n it('has a `rect` with `clipPath`', () => {\n const { allRectClipPath } = partsOfComponent\n\n expect(allRectClipPath.length).toBe(1)\n })\n\n it('has a `linearGradient`', () => {\n const { allLinearGradient } = partsOfComponent\n\n expect(allLinearGradient.length).toBe(1)\n })\n\n it('has three `stop`', () => {\n const { allStops } = partsOfComponent\n\n expect(allStops.length).toBe(3)\n })\n\n it('has `stop` inside the `linearGradient`', () => {\n const { linearGradient } = partsOfComponent\n const stopsIntoLinearGradient = linearGradient.findAllByType('stop')\n\n expect(stopsIntoLinearGradient.length).toBe(3)\n })\n })\n\n describe('unique key', () => {\n it('`id` does not generate undefined `id` values for SVG', () => {\n const { clipPath, linearGradient } = partsOfComponent\n\n expect(clipPath.props.id).not.toBe(undefined)\n expect(linearGradient.props.id).not.toBe(undefined)\n })\n\n it('custom `id` is used', () => {\n const id = 'my-unique-key'\n const wrapperid = renderer.create()\n\n const clipPath = wrapperid.root.findByType('clipPath')\n const linearGradient = wrapperid.root.findByType('linearGradient')\n\n expect(clipPath.props.id).toBe(`${id}-diff`)\n expect(linearGradient.props.id).toBe(`${id}-animated-diff`)\n })\n\n it('render two components with different ids', () => {\n // Wrapper\n const { clipPath, linearGradient } = partsOfComponent\n\n // Another component\n const anotherComp = renderer.create().root\n const anotherClipPath = anotherComp.findByType('clipPath')\n const anotherLinearGradient = anotherComp.findByType('linearGradient')\n\n expect(clipPath.props.id).not.toBe(anotherClipPath.props.id)\n expect(linearGradient.props.id).not.toBe(anotherLinearGradient.props.id)\n })\n\n it('clipPath id and rect clipPath url are the same', () => {\n const { clipPath, rectClipPath } = partsOfComponent\n\n expect(rectClipPath.props.clipPath).toBe(`url(#${clipPath.props.id})`)\n })\n\n it('linearGradient id and rect clipPath fill are the same', () => {\n const { linearGradient, rectClipPath } = partsOfComponent\n\n expect(rectClipPath.props.style.fill).toBe(\n `url(#${linearGradient.props.id})`\n )\n })\n })\n\n describe('a11y', () => {\n it('svg has aria-labelledby', () => {\n const { svg } = partsOfComponent\n\n expect(typeof svg.props['aria-labelledby']).toBe('string')\n expect(svg.props['aria-labelledby'].length).not.toBe(0)\n })\n\n it('aria-labelledby point to title', () => {\n const { svg } = partsOfComponent\n const ariaId = svg.props['aria-labelledby']\n\n const title = wrapper.findByType('title')\n expect(title.props.id).toBe(ariaId)\n })\n\n it('svg has role', () => {\n const { svg } = partsOfComponent\n\n expect(typeof svg.props['role']).toBe('string')\n expect(svg.props['role']).toBe('img')\n })\n\n it('svg has a title', () => {\n const { title } = partsOfComponent\n\n expect(typeof title.props.children).toBe('string')\n expect(title.props.children.length).not.toBe(0)\n })\n })\n\n describe('beforeMask', () => {\n it('beforeMask is used', () => {\n const wrapperWithBeforeMask = renderer.create(\n } />\n ).root\n\n const beforeMask = wrapperWithBeforeMask.findByProps({\n role: 'beforeMask',\n })\n\n expect(beforeMask.props.role).toBe('beforeMask')\n })\n\n it('beforeMask should be a JSX Element', () => {\n const wrapperWithBeforeMask = renderer.create(\n // @ts-ignore\n } />\n ).root\n\n expect(() => {\n wrapperWithBeforeMask.findByProps({\n role: 'beforeMask',\n })\n }).toThrow('No instances found with props: {\"role\":\"beforeMask\"}')\n })\n })\n})\n" }, { "path": "src/web/__tests__/__snapshots__/snapshots.test.tsx.snap", "content": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`ContentLoader snapshots renders correctly the basic version 1`] = `\n\n \n Loading...\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n\n`;\n\nexports[`ContentLoader snapshots renders correctly with beforeMask 1`] = `\n\n \n Loading...\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n\n`;\n\nexports[`ContentLoader snapshots renders correctly with beforeMask 2`] = `\n\n \n Loading...\n \n \n \n \n \n \n \n \n \n \n \n \n \n\n`;\n\nexports[`ContentLoader snapshots renders correctly with viewBox defined 1`] = `\n\n \n Loading...\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n\n`;\n\nexports[`ContentLoader snapshots renders correctly with viewBox defined and sizes defined too 1`] = `\n\n \n Loading...\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n\n`;\n\nexports[`ContentLoader snapshots renders correctly with viewBox empty 1`] = `\n\n \n Loading...\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n\n`;\n" }, { "path": "src/web/__tests__/index.test.tsx", "content": "/**\n * @jest-environment jsdom\n */\n\nimport * as React from 'react'\nimport * as ReactDOM from 'react-dom'\n\nimport ContentLoader from '..'\n\ndescribe('index', () => {\n const div = document.createElement('div')\n div.id = 'root'\n document.body.appendChild(div)\n\n it('renders', () => {\n ReactDOM.render(, document.getElementById('root'))\n })\n\n it('renders a SVG as root element ', () => {\n ReactDOM.render(, document.getElementById('root'))\n const svgElement = document\n .getElementById('root')\n .getElementsByTagName('svg')\n\n expect(svgElement.length).toBe(1)\n })\n})\n" }, { "path": "src/web/__tests__/presets/BulletListStyle.test.tsx", "content": "import * as React from 'react'\nimport * as renderer from 'react-test-renderer'\n\nimport BulletListStyle from '../../presets/BulletListStyle'\n\ndescribe('BulletListStyle', () => {\n const wrapper = renderer.create(\n \n )\n\n test('renders correctly', () => {\n const tree = wrapper.toJSON()\n\n expect(tree).toMatchSnapshot()\n })\n\n test('props are propagated ', () => {\n expect(wrapper.root.props.speed).toEqual(20)\n expect(wrapper.root.props.uniqueKey).toEqual('BulletListStyle')\n })\n})\n" }, { "path": "src/web/__tests__/presets/CodeStyle.test.tsx", "content": "import * as React from 'react'\nimport * as renderer from 'react-test-renderer'\n\nimport CodeStyle from '../../presets/CodeStyle'\n\ndescribe('CodeStyle', () => {\n const wrapper = renderer.create(\n \n )\n\n test('renders correctly', () => {\n const tree = wrapper.toJSON()\n\n expect(tree).toMatchSnapshot()\n })\n\n test('props are propagated ', () => {\n expect(wrapper.root.props.speed).toEqual(20)\n expect(wrapper.root.props.uniqueKey).toEqual('CodeStyle')\n })\n})\n" }, { "path": "src/web/__tests__/presets/FacebookStyle.test.tsx", "content": "import * as React from 'react'\nimport * as renderer from 'react-test-renderer'\n\nimport FacebookStyle from '../../presets/FacebookStyle'\n\ndescribe('FacebookStyle', () => {\n const wrapper = renderer.create(\n \n )\n\n test('renders correctly', () => {\n const tree = wrapper.toJSON()\n\n expect(tree).toMatchSnapshot()\n })\n\n test('props are propagated ', () => {\n expect(wrapper.root.props.speed).toEqual(20)\n expect(wrapper.root.props.uniqueKey).toEqual('FacebookStyle')\n })\n})\n" }, { "path": "src/web/__tests__/presets/InstagramStyle.test.tsx", "content": "import * as React from 'react'\nimport * as renderer from 'react-test-renderer'\n\nimport InstagramStyle from '../../presets/InstagramStyle'\n\ndescribe('InstagramStyle', () => {\n const wrapper = renderer.create(\n \n )\n\n test('renders correctly', () => {\n const tree = wrapper.toJSON()\n\n expect(tree).toMatchSnapshot()\n })\n\n test('props are propagated ', () => {\n expect(wrapper.root.props.speed).toEqual(20)\n expect(wrapper.root.props.uniqueKey).toEqual('InstagramStyle')\n })\n})\n" }, { "path": "src/web/__tests__/presets/ListStyle.test.tsx", "content": "import * as React from 'react'\nimport * as renderer from 'react-test-renderer'\n\nimport ListStyle from '../../presets/ListStyle'\n\ndescribe('ListStyle', () => {\n const wrapper = renderer.create(\n \n )\n\n test('renders correctly', () => {\n const tree = wrapper.toJSON()\n\n expect(tree).toMatchSnapshot()\n })\n\n test('props are propagated ', () => {\n expect(wrapper.root.props.speed).toEqual(20)\n expect(wrapper.root.props.uniqueKey).toEqual('ListStyle')\n })\n})\n" }, { "path": "src/web/__tests__/presets/__snapshots__/BulletListStyle.test.tsx.snap", "content": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`BulletListStyle renders correctly 1`] = `\n\n \n Loading...\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n\n`;\n" }, { "path": "src/web/__tests__/presets/__snapshots__/CodeStyle.test.tsx.snap", "content": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`CodeStyle renders correctly 1`] = `\n\n \n Loading...\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n\n`;\n" }, { "path": "src/web/__tests__/presets/__snapshots__/FacebookStyle.test.tsx.snap", "content": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`FacebookStyle renders correctly 1`] = `\n\n \n Loading...\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n\n`;\n" }, { "path": "src/web/__tests__/presets/__snapshots__/InstagramStyle.test.tsx.snap", "content": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`InstagramStyle renders correctly 1`] = `\n\n \n Loading...\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n\n`;\n" }, { "path": "src/web/__tests__/presets/__snapshots__/ListStyle.test.tsx.snap", "content": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`ListStyle renders correctly 1`] = `\n\n \n Loading...\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n\n`;\n" }, { "path": "src/web/__tests__/snapshots.test.tsx", "content": "import * as React from 'react'\nimport * as renderer from 'react-test-renderer'\n\nimport ContentLoader from '../ContentLoader'\n\ndescribe('ContentLoader snapshots', () => {\n test('renders correctly the basic version', () => {\n const wrapper = renderer.create()\n const tree = wrapper.toJSON()\n\n expect(tree).toMatchSnapshot()\n })\n\n test('renders correctly with viewBox empty', () => {\n const wrapper = renderer.create(\n \n )\n const tree = wrapper.toJSON()\n\n expect(tree).toMatchSnapshot()\n })\n\n test('renders correctly with viewBox defined', () => {\n const wrapper = renderer.create(\n \n )\n const tree = wrapper.toJSON()\n\n expect(tree).toMatchSnapshot()\n })\n\n test('renders correctly with viewBox defined and sizes defined too', () => {\n const wrapper = renderer.create(\n \n )\n const tree = wrapper.toJSON()\n\n expect(tree).toMatchSnapshot()\n })\n\n test('renders correctly with beforeMask', () => {\n let wrapper = renderer.create(\n \n \n \n \n }\n >\n \n \n )\n let tree = wrapper.toJSON()\n\n expect(tree).toMatchSnapshot()\n\n // with wrong type\n wrapper = renderer.create(\n // @ts-ignore\n }>\n \n \n )\n tree = wrapper.toJSON()\n\n expect(tree).toMatchSnapshot()\n })\n})\n" }, { "path": "src/web/__tests__/uid.test.tsx", "content": "import uid from '../../shared/uid'\n\ndescribe('unique id', () => {\n const options = 100\n // @ts-ignore To avoid adding polyfill for `fill` becoz fill is ES6 feature and our target is ES5\n const ids = new Array(options).fill(' ').map(() => uid())\n // @ts-ignore To avoid adding polyfill for `from`\n const unique = Array.from(new Set(ids))\n\n it(`should have ${options} diferents ids`, () => {\n expect(unique.length).toBe(options)\n })\n\n it(`return a string`, () => {\n expect(typeof uid()).toBe('string')\n })\n})\n" }, { "path": "src/web/index.ts", "content": "import { SVGAttributes, ReactElement } from 'react'\n\nimport ContentLoader from './ContentLoader'\n\nexport interface IContentLoaderProps extends SVGAttributes {\n animate?: boolean\n backgroundColor?: string\n backgroundOpacity?: number\n baseUrl?: string\n foregroundColor?: string\n foregroundOpacity?: number\n gradientRatio?: number\n rtl?: boolean\n speed?: number\n title?: string\n uniqueKey?: string\n beforeMask?: ReactElement\n}\n\nexport { default as Facebook } from './presets/FacebookStyle'\nexport { default as Instagram } from './presets/InstagramStyle'\nexport { default as Code } from './presets/CodeStyle'\nexport { default as List } from './presets/ListStyle'\nexport { default as BulletList } from './presets/BulletListStyle'\n\nexport default ContentLoader\n" }, { "path": "src/web/presets/BulletListStyle.tsx", "content": "import * as React from 'react'\n\nimport { IContentLoaderProps } from '..'\nimport ContentLoader from '../ContentLoader'\n\nconst ReactContentLoaderBulletList: React.FC = props => (\n \n \n \n \n \n \n \n \n \n \n)\n\nexport default ReactContentLoaderBulletList\n" }, { "path": "src/web/presets/CodeStyle.tsx", "content": "import * as React from 'react'\n\nimport { IContentLoaderProps } from '..'\nimport ContentLoader from '../ContentLoader'\n\nconst ReactContentLoaderCode: React.FC = props => (\n \n \n \n \n \n \n \n \n \n \n)\n\nexport default ReactContentLoaderCode\n" }, { "path": "src/web/presets/FacebookStyle.tsx", "content": "import * as React from 'react'\n\nimport { IContentLoaderProps } from '..'\nimport ContentLoader from '../ContentLoader'\n\nconst ReactContentLoaderFacebook: React.FC = props => (\n \n \n \n \n \n \n \n \n)\n\nexport default ReactContentLoaderFacebook\n" }, { "path": "src/web/presets/InstagramStyle.tsx", "content": "import * as React from 'react'\n\nimport { IContentLoaderProps } from '..'\nimport ContentLoader from '../ContentLoader'\n\nconst ReactContentLoaderInstagram: React.FC = props => (\n \n \n \n \n \n \n)\n\nexport default ReactContentLoaderInstagram\n" }, { "path": "src/web/presets/ListStyle.tsx", "content": "import * as React from 'react'\n\nimport { IContentLoaderProps } from '..'\nimport ContentLoader from '../ContentLoader'\n\nconst ReactContentLoaderListStyle: React.FC = props => (\n \n \n \n \n \n \n \n \n)\n\nexport default ReactContentLoaderListStyle\n" }, { "path": "tsconfig.base.json", "content": "{\n \"compilerOptions\": {\n \"declaration\": true,\n \"declarationDir\": \"./dist/types\",\n \"declarationMap\": true,\n \"esModuleInterop\": true,\n \"jsx\": \"react\",\n \"lib\": [\"es6\", \"dom\"],\n \"noEmit\": true,\n \"noImplicitAny\": false,\n \"resolveJsonModule\": true,\n \"skipLibCheck\": true,\n \"sourceMap\": true,\n \"target\": \"es5\"\n },\n \"include\": [\"./src/**/*\"],\n \"exclude\": [\"node_modules\", \"src/web/__tests__\"]\n}\n" }, { "path": "tsconfig.json", "content": "{\n \"extends\": \"./tsconfig.base.json\"\n}\n" }, { "path": "tsconfig.test.json", "content": "{\n \"extends\": \"./tsconfig.base.json\",\n \"compilerOptions\": {\n \"lib\": [\"dom\"]\n }\n}\n" } ]