react-samay - npm Package Compare versions

Comparing version 0.4.1 to 0.5.0

lib/index.js

@@ -196,8 +196,21 @@ var $83Duu$reactjsxruntime = require("react/jsx-runtime");
 
-  /* Pos rel needed to make offsetTop work
-  used in scrolling to selected option */
+  /*
+   * position relative needed to make offsetTop work
+   * used in scrolling to selected option
+   */
   position: relative;
   overflow-y: auto;
   max-height: 12em;
+  border: 1px solid #e9e9e9;
 
+  scrollbar-width: 8px;
+
+  &:first-child {
+    border-left: 0;
+  }
+
+  &:last-child {
+    border-right: 0;
+  }
+
   ul {
@@ -215,7 +228,6 @@ list-style: none;
     padding: 0;
-    /* padding: 0 0 0 16px; */
-    /* width: 100%; */
+    width: 100%;
     height: 24px;
     line-height: 24px;
-    text-align: left;
+    text-align: center;
     cursor: pointer;
@@ -227,2 +239,15 @@ user-select: none;
     }
+
+    &.${({ className: className  })=>className + "-option-selected"} {
+      background: #f7f7f7;
+      font-weight: bold;
+    }
+
+    &.${({ className: className  })=>className + "-option-disabled"} {
+      color: #ccc;
+      &:hover {
+        background: transparent;
+        cursor: not-allowed;
+      }
+    }
   }
@@ -361,2 +386,6 @@ `;
   background-color: white;
+  border-radius: 4px;
+  border-left: 1px solid #ccc;
+  border-right: 1px solid #ccc;
+  margin-left: -1px;
 `;
@@ -679,4 +708,4 @@ class $6d6dfe87a472df4a$var$Combobox extends (0, $83Duu$react.Component) {
     className: "",
-    popupClassName: "",
     inputClassName: "",
+    placeholder: "",
     defaultOpenValue: new Date(),
@@ -683,0 +712,0 @@ use12Hours: false,

package.json

 {
   "name": "react-samay",
-  "version": "0.4.1",
+  "version": "0.5.0",
   "description": "Time picker for React.js",
@@ -28,3 +28,3 @@ "homepage": "https://github.com/sushantdhiman/react-samay",
     "@types/react": "^18.x",
-    "@types/react-dom": "^17.x",
+    "@types/react-dom": "^18.x",
     "@types/styled-components": "^5.1.25",
@@ -36,3 +36,2 @@ "@typescript-eslint/eslint-plugin": "^5.30.5",
     "parcel": "^2.6.2",
-    "polished": "^4.2.2",
     "react": "^18.2.0",
@@ -39,0 +38,0 @@ "react-dom": "^18.2.0",

README.md

@@ -14,3 +14,3 @@ # React Samay
 This migrated package is still not ready for production, as there might be some
-bugs related to code refactor. I'll welcome any PR(s) or issues so this package
+bugs related to code refactor. I'll welcome any PR(s) or bug reports so this package
 can be improved.
@@ -21,9 +21,7 @@
 - Uses native date object
-- Dropdown based hour, minutes, seconds & meridiem. Better for desktop users
-  with keyboard / mouse.
+- Dropdown based hours, minutes, seconds & meridiem selection, better for desktop
+  users with keyboard / mouse.
 - Keyboard navigation
-- Styled component
 - Similar API as `rc-time-picker`
-- Written with Typescript
-- In-built typings
+- Written with Typescript, with built-in typings
 
@@ -42,7 +40,48 @@ ## Install
 
-ReactDOM.render(<TimePicker />, <div id="app" />);
+ReactDOM.render(
+  <TimePicker
+    value={new Date()}
+    onChange={(date) => {
+      console.log(date);
+    }}
+  />,
+  <div id="app" />
+);
 ```
 
-## Examples
+You can find more storybook examples [here](https://sushantdhiman.com/projects/react-samay).
 
-Storybook examples are available [here](https://sushantdhiman.com/projects/react-samay).
+## API
+
+### TimePicker
+
+| Name                | Type               | Default       |
+| ------------------- | ------------------ | ------------- |
+| prefixCls           | String             | 'react-samay' |
+| disabled            | Boolean            | false         |
+| open                | Boolean            | false         |
+| defaultValue        | Date               | null          |
+| defaultOpenValue    | Date               | new Date()    |
+| value               | Date               | null          |
+| placeholder         | String             | ''            |
+| className           | String             | ''            |
+| inputClassName      | String             | ''            |
+| name                | String             | -             |
+| id                  | String             | ''            |
+| showHour            | Boolean            | true          |
+| showMinute          | Boolean            | true          |
+| showSecond          | Boolean            | true          |
+| format              | String             | -             |
+| disabledHours       | Function           | -             |
+| disabledMinutes     | Function           | -             |
+| disabledSeconds     | Function           | -             |
+| use12Hours          | Boolean            | false         |
+| hideDisabledOptions | Boolean            | false         |
+| onChange            | Function           | null          |
+| onAmPmChange        | Function           | null          |
+| onOpen              | Function({ open }) |               |
+| onClose             | Function({ open }) |               |
+| hourStep            | Number             | 1             |
+| minuteStep          | Number             | 1             |
+| secondStep          | Number             | 1             |
+| inputReadOnly       | Boolean            | false         |

types/index.d.ts

@@ -33,3 +33,2 @@ import React, { Component, KeyboardEvent } from "react";
     placeholder: string;
-    popupClassName: string;
     prefixCls: string;
@@ -36,0 +35,0 @@ secondStep: number;

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

108051

increased by2.93%

Dev dependency count

15

decreased by-6.25%

Lines of code

908

increased by2.6%

Number of lines in readme file

85

increased by84.78%

No dependency changes