From d9fbb6486c3f3973f1ef83a1461c2721d2e9a1d5 Mon Sep 17 00:00:00 2001 From: Dewansh Rawat Date: Thu, 1 Oct 2020 15:54:44 +0530 Subject: [PATCH 1/4] Fixed the position of the pop up --- src/demo/index.tsx | 2 +- src/lib/index.tsx | 20 +++++++++++--------- 2 files changed, 12 insertions(+), 10 deletions(-) diff --git a/src/demo/index.tsx b/src/demo/index.tsx index 4db66df..4c8a581 100644 --- a/src/demo/index.tsx +++ b/src/demo/index.tsx @@ -8,7 +8,7 @@ const App = () => ( style={{ display: "flex", alignItems: "center", flexDirection: "column" }} >

Copy email address to clipboard

- + ); diff --git a/src/lib/index.tsx b/src/lib/index.tsx index 5313063..d20559b 100644 --- a/src/lib/index.tsx +++ b/src/lib/index.tsx @@ -25,8 +25,8 @@ const containerBaseStyles: React.CSSProperties = { position: "relative", }; -const tooltipBaseStyles: React.CSSProperties = { - bottom: "26px", +const tooltipBaseStyles = (pos: string): React.CSSProperties => ({ + [pos === "above" ? "bottom" : "top"]: "26px", maxWidth: "fit-content", position: "absolute", width: "auto", @@ -41,10 +41,10 @@ const tooltipBaseStyles: React.CSSProperties = { padding: "6px 8px", borderRadius: "5px", opacity: 0, - transform: "translateY(-5px)", + transform: `translateY(${pos === "above" ? "-5px": "5px"})`, visibility: "hidden", transition: "all 0.2s ease-in-out", -}; +}); const toolTipVisibleStyles: React.CSSProperties = { opacity: 1, @@ -60,6 +60,7 @@ const CopyMailTo = ({ containerStyles = {}, tooltipStyles = {}, anchorStyles = {}, + pos = "above", }: { email: string; children?: React.ReactNode; @@ -68,6 +69,7 @@ const CopyMailTo = ({ containerStyles?: React.CSSProperties; tooltipStyles?: React.CSSProperties; anchorStyles?: React.CSSProperties; + pos?: string; }): JSX.Element => { const [showCopied, setShowCopied] = React.useState(false); const [showTooltip, setShowTooltip] = React.useState(false); @@ -101,10 +103,10 @@ const CopyMailTo = ({ }; const allTooltipStyles = { - ...tooltipBaseStyles, - ...tooltipStyles, - ...(showTooltip && toolTipVisibleStyles), - }; + ...tooltipBaseStyles(pos), + ...tooltipStyles, + ...(showTooltip && toolTipVisibleStyles), + }; return ( @@ -127,4 +129,4 @@ const CopyMailTo = ({ ); }; -export default CopyMailTo; +export default CopyMailTo; \ No newline at end of file From 9b50f4a26fda4ac5d23c99042d466d57f58554b4 Mon Sep 17 00:00:00 2001 From: Dewansh Rawat Date: Thu, 1 Oct 2020 16:09:35 +0530 Subject: [PATCH 2/4] Create main.yml --- .github/workflows/main.yml | 28 ++++++++++++++++++++++++++++ 1 file changed, 28 insertions(+) create mode 100644 .github/workflows/main.yml diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml new file mode 100644 index 0000000..0c30e87 --- /dev/null +++ b/.github/workflows/main.yml @@ -0,0 +1,28 @@ +name: CI +on: + push: + branches: [ master ] + pull_request: + branches: [ master ] + +jobs: + build: + runs-on: ubuntu-latest + steps: + - name: Checkout 🛎️ + uses: actions/checkout@v2.3.1 + with: + persist-credentials: false + + - name: Install and Build 🔧 + run: | + npm install + npm run build + + - name: Deploy 🚀 + uses: JamesIves/github-pages-deploy-action@3.6.2 + with: + GITHUB_TOKEN: ${{ secrets.Devfolio_Token }} + BRANCH: gh-pages + FOLDER: lib + CLEAN: true From c86c77532315b565f4e5ad0d17b9a28e501aff20 Mon Sep 17 00:00:00 2001 From: Dewansh Rawat Date: Thu, 1 Oct 2020 16:27:08 +0530 Subject: [PATCH 3/4] Revert "Fixed the position of the pop up" This reverts commit d9fbb6486c3f3973f1ef83a1461c2721d2e9a1d5. --- src/demo/index.tsx | 2 +- src/lib/index.tsx | 20 +++++++++----------- 2 files changed, 10 insertions(+), 12 deletions(-) diff --git a/src/demo/index.tsx b/src/demo/index.tsx index 4c8a581..4db66df 100644 --- a/src/demo/index.tsx +++ b/src/demo/index.tsx @@ -8,7 +8,7 @@ const App = () => ( style={{ display: "flex", alignItems: "center", flexDirection: "column" }} >

Copy email address to clipboard

- + ); diff --git a/src/lib/index.tsx b/src/lib/index.tsx index d20559b..5313063 100644 --- a/src/lib/index.tsx +++ b/src/lib/index.tsx @@ -25,8 +25,8 @@ const containerBaseStyles: React.CSSProperties = { position: "relative", }; -const tooltipBaseStyles = (pos: string): React.CSSProperties => ({ - [pos === "above" ? "bottom" : "top"]: "26px", +const tooltipBaseStyles: React.CSSProperties = { + bottom: "26px", maxWidth: "fit-content", position: "absolute", width: "auto", @@ -41,10 +41,10 @@ const tooltipBaseStyles = (pos: string): React.CSSProperties => ({ padding: "6px 8px", borderRadius: "5px", opacity: 0, - transform: `translateY(${pos === "above" ? "-5px": "5px"})`, + transform: "translateY(-5px)", visibility: "hidden", transition: "all 0.2s ease-in-out", -}); +}; const toolTipVisibleStyles: React.CSSProperties = { opacity: 1, @@ -60,7 +60,6 @@ const CopyMailTo = ({ containerStyles = {}, tooltipStyles = {}, anchorStyles = {}, - pos = "above", }: { email: string; children?: React.ReactNode; @@ -69,7 +68,6 @@ const CopyMailTo = ({ containerStyles?: React.CSSProperties; tooltipStyles?: React.CSSProperties; anchorStyles?: React.CSSProperties; - pos?: string; }): JSX.Element => { const [showCopied, setShowCopied] = React.useState(false); const [showTooltip, setShowTooltip] = React.useState(false); @@ -103,10 +101,10 @@ const CopyMailTo = ({ }; const allTooltipStyles = { - ...tooltipBaseStyles(pos), - ...tooltipStyles, - ...(showTooltip && toolTipVisibleStyles), - }; + ...tooltipBaseStyles, + ...tooltipStyles, + ...(showTooltip && toolTipVisibleStyles), + }; return ( @@ -129,4 +127,4 @@ const CopyMailTo = ({ ); }; -export default CopyMailTo; \ No newline at end of file +export default CopyMailTo; From afb73d2447dae8b4733caec3dfeb13127f2a669b Mon Sep 17 00:00:00 2001 From: Dewansh Rawat Date: Thu, 1 Oct 2020 16:35:33 +0530 Subject: [PATCH 4/4] Added relative positions for anchoring and setup workflow --- .github/workflows/main.yml | 5 +++-- src/demo/index.tsx | 4 ++-- src/lib/index.tsx | 20 +++++++++++--------- 3 files changed, 16 insertions(+), 13 deletions(-) diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml index 0c30e87..22c945e 100644 --- a/.github/workflows/main.yml +++ b/.github/workflows/main.yml @@ -1,7 +1,7 @@ name: CI on: push: - branches: [ master ] + branches: [ master, dewanshrawat15-patch* ] pull_request: branches: [ master ] @@ -18,11 +18,12 @@ jobs: run: | npm install npm run build + npm run demo:prod - name: Deploy 🚀 uses: JamesIves/github-pages-deploy-action@3.6.2 with: GITHUB_TOKEN: ${{ secrets.Devfolio_Token }} BRANCH: gh-pages - FOLDER: lib + FOLDER: dist CLEAN: true diff --git a/src/demo/index.tsx b/src/demo/index.tsx index 4db66df..c84d276 100644 --- a/src/demo/index.tsx +++ b/src/demo/index.tsx @@ -8,8 +8,8 @@ const App = () => ( style={{ display: "flex", alignItems: "center", flexDirection: "column" }} >

Copy email address to clipboard

- + ); -ReactDOM.render(, document.getElementById("app")); +ReactDOM.render(, document.getElementById("app")); \ No newline at end of file diff --git a/src/lib/index.tsx b/src/lib/index.tsx index 5313063..d20559b 100644 --- a/src/lib/index.tsx +++ b/src/lib/index.tsx @@ -25,8 +25,8 @@ const containerBaseStyles: React.CSSProperties = { position: "relative", }; -const tooltipBaseStyles: React.CSSProperties = { - bottom: "26px", +const tooltipBaseStyles = (pos: string): React.CSSProperties => ({ + [pos === "above" ? "bottom" : "top"]: "26px", maxWidth: "fit-content", position: "absolute", width: "auto", @@ -41,10 +41,10 @@ const tooltipBaseStyles: React.CSSProperties = { padding: "6px 8px", borderRadius: "5px", opacity: 0, - transform: "translateY(-5px)", + transform: `translateY(${pos === "above" ? "-5px": "5px"})`, visibility: "hidden", transition: "all 0.2s ease-in-out", -}; +}); const toolTipVisibleStyles: React.CSSProperties = { opacity: 1, @@ -60,6 +60,7 @@ const CopyMailTo = ({ containerStyles = {}, tooltipStyles = {}, anchorStyles = {}, + pos = "above", }: { email: string; children?: React.ReactNode; @@ -68,6 +69,7 @@ const CopyMailTo = ({ containerStyles?: React.CSSProperties; tooltipStyles?: React.CSSProperties; anchorStyles?: React.CSSProperties; + pos?: string; }): JSX.Element => { const [showCopied, setShowCopied] = React.useState(false); const [showTooltip, setShowTooltip] = React.useState(false); @@ -101,10 +103,10 @@ const CopyMailTo = ({ }; const allTooltipStyles = { - ...tooltipBaseStyles, - ...tooltipStyles, - ...(showTooltip && toolTipVisibleStyles), - }; + ...tooltipBaseStyles(pos), + ...tooltipStyles, + ...(showTooltip && toolTipVisibleStyles), + }; return ( @@ -127,4 +129,4 @@ const CopyMailTo = ({ ); }; -export default CopyMailTo; +export default CopyMailTo; \ No newline at end of file